css selector

伪类选择器

选择器例子例子描述
:activea:active选择活动的链接。
:checkedinput:checked选择每个被选中的 <input> 元素。
:disabledinput:disabled选择每个被禁用的 <input> 元素。
:emptyp:empty选择没有子元素的每个 <p> 元素。
:enabledinput:enabled选择每个已启用的 <input> 元素。
:first-childp:first-child选择作为其父的首个子元素的每个 <p> 元素。
:first-of-typep:first-of-type选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focusinput:focus选择获得焦点的 <input> 元素。
:hovera:hover选择鼠标悬停其上的链接。
:in-rangeinput:in-range选择具有指定范围内的值的 <input> 元素。
:invalidinput:invalid选择所有具有无效值的 <input> 元素。
:lang(language)p:lang(it)选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-childp:last-child选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-typep:last-of-type选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:linka:link选择所有未被访问的链接。
:not(selector):not(p)选择每个非 <p> 元素的元素。
:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个<p>元素,从最后一个子元素计数。
:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个<p>元素的每个<p>元素,从最后一个子元素计数
:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-typep:only-of-type选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-childp:only-child选择作为其父的唯一子元素的 <p> 元素。
:optionalinput:optional选择不带 "required" 属性的 <input> 元素。
:out-of-rangeinput:out-of-range选择值在指定范围之外的 <input> 元素。
:read-onlyinput:read-only选择指定了 "readonly" 属性的 <input> 元素。
:read-writeinput:read-write选择不带 "readonly" 属性的 <input> 元素。
:requiredinput:required选择指定了 "required" 属性的 <input> 元素。
:rootroot选择元素的根元素。
:target#news:target选择当前活动的 #news 元素(单击包含该锚名称的 URL)。
:validinput:valid选择所有具有有效值的 <input> 元素。
:visiteda:visited选择所有已访问的链接。

链接伪类选择器

链接伪类选择器用于给超链接标签添加特殊的效果

css
1a:link {color: red;}        /* 未访问的链接状态 */
2a:visited {color: green;}    /* 已访问的链接状态 */
3a:hover {color: blue;}     /* 鼠标滑过链接状态 */
4a:active {color: yellow;} /* 鼠标按下去时的状态 */

结构(位置)伪类选择器

常用的结构伪类选择器:

  • E:first-child 选择器
    表示选择父元素中的第一个子元素 E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。
    举例:

    css
    1ol > li:first-child{
    2  color: red;
    3}
  • :last-child 选择器
    选择的是元素的最后一个子元素。比如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器。
    举例:

    css
    1ol > li:last-child{
    2  color: red;
    3}
  • :nth-child(n) 选择器
    用来定位某个父元素一个或多个特定的子元素。其中“n”是其参数,不仅可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd 奇数、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。
    举例:

    css
    1ol li:nth-child(even){
    2  background: orange;
    3}
  • E:empty 选择器
    表示的就是空。用来选择没有任何内容的元素E,这里没有内容指的是一点内容都没有,哪怕是一个空格
    举例:

    css
    1p{
    2 background: orange;
    3 min-height: 30px;
    4}
    5p:empty {
    6  display: none;
    7}
  • E:root 选择器
    从字面上我们就可以很清楚的理解是根选择器,它的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是。

    css
    1:root{
    2    background:pink;
    3}
    4/*等同于*/
    5html {background:pink;}

目标伪类选择器

:target 选择器会突出显示当前活动的 HTML 锚,然后给它添加相应的样式。

html
1<h2><a href="#brand">Brand</a></h2>
2<div id="brand">
3    content for Brand
4</div>
5
6#brand:target {
7  background: orange;
8  color: #fff;
9}

当点击链接时,锚点被激活,#brand 的 :target 样式会被应用。

逻辑选择器

在 CSS 选择器家族中,新增这样一类比较新的选择器逻辑选择器,目前共有 4 名成员:

  • :is
  • :where
  • :not
  • :has

:is 伪类选择器

:is() CSS伪类函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。
在之前,对于多个不同父容器的同个子元素的一些共性样式设置,可能会出现如下 CSS 代码:

header p:hover, main p:hover, footer p:hover {   color: red;   cursor: pointer; }

而如今有了 :is() 伪类,上述代码可以改写成:

:is(header, main, footer) p:hover {   color: red;   cursor: pointer; }

它并没有实现某种选择器的新功能,更像是一种语法糖,只是对原有功能的重新封装设计,实现了更容易的表达一个操作的语法,简化了某些复杂代码的写法。
ps: :is 不支持伪元素
有个特例,不能用 :is() 来选取 ::before 和 ::after 两个伪元素。譬如:

注意,仅仅是不支持伪元素,伪类,譬如 :focus:hover 是支持的。

:is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

:where 伪类选择器

:is 用法基本一致,唯一的区别在于:where() 的优先级总是为 0,而:is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

:not 伪类选择器

:not 伪类选择器用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。
与 :is() 类似,:not() 选择器本身不会影响选择器的优先级,它的优先级是由它的选择器列表中优先级最高的选择器决定的。

:has 伪类选择器

:has() CSS 伪类代表一个元素,其给定的选择器参数(相对于该元素的 :scope)至少匹配一个元素。

css
1// 下面的选择器只会匹配直接包含 <img> 子元素的 <a> 元素:
2a:has(> img)

选择器 -> 组合器

  • 后代组合器Descendant combinator
    ' '(空格)组合器选择前一个元素的后代节点。
    语法:A B 例子:div span 匹配所有位于任意 <div> 元素之内的 <span> 元素。

  • 直接子代组合器Child combinator
    > 组合器选择前一个元素的直接子代的节点。
    语法A > B 例子ul > li 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。

  • 一般兄弟组合器General sibling combinator
    ~ 组合器选择兄弟元素,也就是说,后一个节点在前一个节点后面的任意位置,并且共享同一个父节点。
    语法A ~ B 例子p ~ span 匹配同一父元素下,<p> 元素后的所有 <span> 元素。

  • 紧邻兄弟组合器Adjacent sibling combinator
    + 组合器选择相邻元素,即后一个元素紧跟在前一个之后,并且共享同一个父节点。
    语法:A + B 例子:h2 + p 会匹配所有紧邻在 <h2> (en-US) 元素后的 <p> 元素。

  • 列组合器Column combinator) Experimental
    || 组合器选择属于某个表格行的节点。
    语法: A || B 例子: col || td 会匹配所有 <col> 作用域内的 <td> 元素。

  • 交集选择器 交集选择器两个选择器直接连接构成

    css
    1h1.class {
    2
    3}
    4
    5.classA.classB {
    6
    7}
  • 并集选择器, 并集选择器一定是英文逗号隔开

    css
    1/*选择器1,选择器2,选择器3......{属性:属性值;}*/
    2.top, #nav, p {
    3  color:red;
    4}

选择器 -> 属性选择器

example:

css
1/* 存在 title 属性的<a> 元素 */
2a[title] {
3  color: purple;
4}
5
6/* 存在 href 属性并且属性值匹配"https://example.org"的<a> 元素 */
7a[href="https://example.org"] {
8  color: green;
9}
10
11/* 存在 href 属性并且属性值包含"example"的<a> 元素 */
12a[href*="example"] {
13  font-size: 2em;
14}
15
16/* 存在 href 属性并且属性值结尾是".org"的<a> 元素 */
17a[href$=".org"] {
18  font-style: italic;
19}
20
21/* 存在 class 属性并且属性值包含以空格分隔的"logo"的<a>元素 */
22a[class~="logo"] {
23  padding: 2px;
24}

[attr] 表示带有以 attr 命名的属性的元素。
[attr=value] 表示带有以 attr 命名的属性,且属性值为 value 的元素。
[attr~=value] 表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为 value
[attr|=value] 表示带有以 attr 命名的属性的元素,属性值为“value”或是以“value-”为前缀("-"为连字符,Unicode 编码为 U+002D)开头。典型的应用场景是用来匹配语言简写代码(如 zh-CN,zh-TW 可以用 zh 作为 value)。
[attr^=value] 表示带有以 attr 命名的属性,且属性值是以 value 开头的元素。
[attr$=value] 表示带有以 attr 命名的属性,且属性值是以 value 结尾的元素。
[attr*=value] 表示带有以 attr 命名的属性,且属性值至少包含一个 value 值的元素。

所有 CSS 伪元素

选择器例子例子描述
::afterp::after在每个 <p> 元素之后插入内容。
::beforep::before在每个 <p> 元素之前插入内容。
::first-letterp::first-letter选择每个 <p> 元素的首字母。
::first-linep::first-line选择每个 <p> 元素的首行。
::selectionp::selection选择用户选择的元素部分。

select shadow DOM child element

譬如试用 micro-app 时,想要改变 shadow DOM 内部元素的样式。

js
1document.getElementById('hui-agent')?.shadowRoot?.querySelector('micro-app-head');

通过添加 style 标签来覆盖。