CSS 选择器

oorzc2022年9月29日大约 8 分钟

CSS 选择器

参考：W3school

一、基本

1.1 基本选择器

* 通用元素选择器，匹配所有元素。
E 标签选择器，匹配所有使用 E 标签的元素。
.info class 选择器，匹配所有 class 属性中包含 info 的元素。
#footer id 选择器，匹配所有 id 属性等于 footer 的元素。

1.2 组合选择器

E, F 多元素选择器，匹配所有 E 元素或 F 元素，E 和 F 之间用逗号分隔。
E F 后代元素选择器，匹配所有属于 E 元素内部的 F 元素，E 和 F 之间用空格分隔。
E > F 子元素选择器，匹配所有 E 元素的子元素 F (不是所有的后代元素，仅子元素)。
E + F 毗邻元素选择器，匹配所有紧随 E 元素之后的第一个同级元素 F (E 和 F 要前后紧靠相邻)。
E ~ F 匹配任何在 E 元素之后的同级 F 元素(和E + F的区别是，这个是 E 元素后面的所有同级 F 元素，而非紧靠着 E 元素的同级 F 元素)。

二、属性选择器

2.1 CSS 2.1

[attr] 匹配所有具有 attr 属性的 E 元素，不考虑它的值。
[attr=val] 匹配所有 attr 属性等于"val"的元素。这里元素的 attr 属性的值必须和 val 相等。
[attr~=val] 匹配所有 attr 属性具有值为"val"的单词的元素。注意这里的 val 需要是一个独立的单词，而不能是单词中的一部分。由于“单词”只对 ASCII 字符有效，所有对于中文是没有效果的，即便在每个中文字词之间加上空格。
[attr|=val] 匹配 attr 属性的值是 val 或值以 val- 开头的元素。

2.2 CSS 3

下面这三个选择器虽然是 CSS3 中的，但是 IE7 浏览器也支持：

[attr^=val] 匹配 attr 属性的值以 val 开头（包括 val）的元素。
[attr$=val] 匹配 attr 属性的值以 val 结尾（包括 val）的元素。
[attr*=val] 匹配 attr 属性的值中包含子字符串 val 的元素(一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是字符串 ”caterpillar“ 的子字符串)。

注：E[att!="val"]这种方式可以在 jQuery 作为选择器使用，表示属性 att 的值不是 val 的元素。

2.3 修饰符

同时，属性选择器还支持正则表达式中的i和g修饰符作为参数，这属于 CSS 4 标准：

i 忽略属性值的大小写。
g 表示大小写敏感。

g这个属性当前仍未纳入标准，支持的浏览器并不多。

如[class*="text" i]选择器可以选中如下的 HTML 元素：

<p class="text"></p>
<p class="nameText"></p>
<p class="desc textarea"></p>

三、伪类

3.1 基本伪类

E:first-child 匹配作为某元素的第一个子元素的 E 元素(即匹配的是父元素中的第一个 E 子元素)。
E:link 匹配所有未被点击的链接，只能用于超链接。
E:visited 匹配所有已被点击的链接，只能用于超链接。
E:active 匹配鼠标已经在其上按下、还没有释放的 E 元素。
E:hover 匹配鼠标悬停其上的 E 元素。
E:focus 匹配获得当前焦点的 E 元素。
E:lang(c) 匹配 lang 属性以 c 开头的 E 元素。

3.2 与用户界面有关的伪类

下面这几个伪类选择器是在 CSS 3 中加入的，可以根据用户与页面的交互来选择元素：

E:enabled 匹配表单中激活的元素。
E:disabled 匹配表单中禁用的元素。
E:checked 匹配表单中被选中的 radio（单选框）或 checkbox（复选框）元素。
E::selection 匹配用户当前选中的元素(其实是伪元素)。

3.3 结构性伪类

下面这些伪类是根据元素的内容、排列等方式进行选择的，也是在 CSS 3 中加入的：

E:root 匹配文档的根元素，对于网页来说，就是 HTML 元素。
E:empty 匹配一个不包含任何子元素的元。(注意：文本节点也被看作子元素)。
E:nth-child(n) 匹配作为父元素的第 n 个子元素的 E 元素，第一个编号为 1。如：p:nth-child(2)匹配的是属于其父元素的第二个子元素的每个 p 元素.
E:nth-last-child(n) 匹配作为父元素的倒数第 n 个子元素的 E 元素，倒数第一个编号为 1。
E:nth-of-type(n) 匹配父元素中所有 E 元素中的第 n 个 E 元素。
E:nth-last-of-type(n) 匹配父元素中所有 E 元素中的倒数第 n 个 E 元素。
E:last-child 匹配作为父元素的最后一个子元素的 E 元素。
E:first-of-type 匹配父元素下第一个 E 子元素，即便 E 元素不是其父元素的第一个子元素。如果父元素中有多个 E 子元素，也只选择其中的第一个 E 子元素。
E:last-of-type 匹配父元素下最后一个 E 子元素，即便这个 E 元素后面还有其他类型的子元素。
E:only-child 匹配 E 元素是其父元素下仅有的一个子元素，如果父元素中还有其他元素，那么该 E 元素就不会被选中。
E:only-of-type 匹配作为父元素下的唯一一个 E 子元素的元素，等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)

3.4 其他伪类

:not(s) 反选伪类。匹配不符合当前选择器 s 的任何元素。这里的 s 表示其他的任何一种选择器。
E:target 锚点伪类。匹配文档中特定"id"(锚点)点击后的效果。参考：Suckerfish :target。

对于锚点伪类，可以参考如下示例：

一个 a 元素的 href 属性为"#test"，而且页面中有一个 h2 元素的 id 为"test"，则点击 a 元素之后，就会跳转到 h2 元素，同时会使 h2 元素的:target伪类(即h2:target)生效。可以查看这个示例

如果这个锚点指向的是一片区域(如一个 div)，那么这一片区域(div)将会触发这个伪类。IE 可能不支持这个伪类。

四、其他事项

4.1 链接伪类

链接元素也有这四个伪类:link、:visited、:hover、:active。使用链接的伪类的时候，为了保证伪类的正确表达，需要注意如下事项：

:active一般不必写
一定要注意顺序：LVHA
a:link可以简写为 a，但是前者只针对所有写了href属性的超链接（不包括锚点），后者则针对所有的超链接，包括锚点。

4.2 伪元素

伪元素和伪类不同：伪类是一种选择器，用于匹配页面中的元素，而伪元素则是一种虚拟的元素，但是也可以像正常的元素一样设置样式。

目前 CSS 标准中有如下伪元素：

E::first-line 匹配 E 元素的第一行
E::first-letter 匹配 E 元素的第一个字母
E::before 在 E 元素之前插入生成的内容
E::after 在 E 元素之后插入生成的内容

伪元素应该使用::两个冒号来表示，以和伪类进行区别，但是使用一个冒号也是能正常工作的。

4.3 :not 伪类注意事项

CSS 选择器都会有相应的优先级，而逻辑伪类(如:not())本身是没有优先级的，整个逻辑伪类选择器的优先级是由括号里面内容决定的。比如：

:not(.disabled) {}    /* 优先级等同于.disabled选择器 */
:not(a) {}    /* 优先级等同于a选择器 */

:not()逻辑伪类出身很早，早到 IE9 浏览器都支持，但其括号里面并不支持复杂的选择器。例如，:not()伪类括号里面不能多个选择器：

:not(.disabled, .read-only) {}    /* 无效，不支持 */
:not(.disabled), :not(.read-only) {} /* 需写成这样 */

:not(a.disabled) {}    /* 无效，不支持 */
:not(a):not(.disabled) {} /* 需写成这样 */

:not()伪类直接的逻辑关系为：连接在一起表示“与”(&&)，分割开来表示“或”(||)。比如：

/* 不包含 .disabled 或 .read-only 类名 input 元素 */
input:not(.disabled), input:not(.read-only) {}

/* 不包含 .disabled 类名而且不包含 .read-only 类名 input 元素*/
input:not(.disabled):not(.read-only) {}

伪类选择器

 /* :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器 */
p:first-child{background-color:yellow;} 
 
 /* :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素 */
p:last-child{ background:#ff0000;}
 
 /* 规定属于其父元素的第二个子元素的每个 p 的背景色 */
p:nth-child(2){background:#ff0000;}
 
 /* Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1 */
p:nth-child(odd){background:#ff0000;}
p:nth-child(even){background:#0000ff;}
 
/* 我们指定了下标是 3 的倍数的所有 p 元素的背景色 */
p:nth-child(3n+0){background:#ff0000;}
 
 /* :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数 */
p:nth-last-child(2){background:#ff0000;} 
 p:nth-last-child(odd){background:#ff0000;}  /*奇数行 */
p:nth-last-child(even){background:#0000ff;}  /*偶数行*/
p:nth-last-child(3n+0){background:#ff0000;}  /*倍数行*/
 
 /* :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 */
p:empty {display: none;} 
 
 /* :not选择器称为否定选择器，可以选择除某个元素之外的所有元素。 */
input:not([type="submit"]){
  border:1px solid red;
} 
input:not(:first-child){
  border:1px solid red;
}