CSS选择器详解

---

概念

选择器

它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

选择器列表

如果有多个使用相同样式的 CSS 选择器，那么这些单独的选择器可以被混编为一个“选择器列表”。

/* h1和.special类有相同的 CSS，那么我可以把它们写成两个分开的规则。 */
h1 {
  color: blue;
}

.special {
  color: blue;
}

/* 也可以将它们组合起来，在它们之间加上一个逗号，变为选择器列表。 */
h1, .special {
  color: blue;
}

/* 如果每个选择器都另起一行，会更好读些。 */
h1,
.special {
  color: blue;
}

---

类型、类和 ID 选择器

类型（元素）选择器

通过 节点名称 匹配元素。换句话说，它选择一个文件中所有给定类型的元素。

/* 所有 <h1> */
h1 {
	color:red;
}

类选择器

根据 class 属性的内容匹配元素。

/* 所有含有 class="spacious" 类的元素 */
.spacious {
  margin: 2em;
}

/* 所有含有 class="spacious" 类的 <li> 元素 */
li.spacious {
  margin: 2em;
}

/* 所有同时含有“spacious”和“elegant”类的 <li> 元素 */
/* 例如 class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

注： 等价于 [class~=类名] { 样式声明 }

属性选择器

匹配那些具有特定属性或属性值的元素。
语法：

• [attr] : 表示带有以 attr 命名的属性的元素。
• [attr=value] : 表示带有以 attr 命名的属性，且属性值 为 value 的元素。
• [attr~=value] : 表示带有以 attr 命名的属性的元素，并且该属性是一个以 空格 作为分隔的值列表，其中至少有 一个值 为 value。
• [attr|=value] : 表示带有以 attr 命名的属性的元素，属性值为 value 或是以 value- 为前缀 开头 。
• [attr^=value] : 表示带有以 attr 命名的属性，且属性值是以 value 开头 的元素。
• [attr$=value] : 表示带有以 attr 命名的属性，且属性值是以 value 结尾 的元素。
• [attr*=value] : 表示带有以 attr 命名的属性，且属性值至少 包含 一个 value 值的元素。
• [attr operator value i] : 在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时 忽略大小写（支持 ASCII 字符范围之内的字母）。

示例：

a {
  color: blue;
}

/* 以 "#" 开头的页面内部链接 */
a[href^="#"] {
  background-color: gold;
}

/* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}

/* 包含 "insensitive" 的链接，不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 以 ".org" 结尾的链接 */
a[href$=".org"] {
  color: red;
}

/* 以 "https" 开始，".org" 结尾的链接 */
a[href^="https"][href$=".org"] {
  color: green;
}

/* 将所有包含 `lang` 属性的 <div> 元素的字重设为 bold */
div[lang] {
  font-weight: bold;
}

/* 将所有语言为美式英语的 <div> 元素的文本颜色设为蓝色 */
div[lang~="en-us"] {
  color: blue;
}

/* 将所有语言为葡萄牙语的 <div> 元素的文本颜色设为绿色 */
div[lang="pt"] {
  color: green;
}

/* 将所有语言为中文的 <div> 元素的文本颜色设为红色
   无论是简体中文（zh-CN）还是繁体中文（zh-TW） */
div[lang|="zh"] {
  color: red;
}

/* 将所有 `data-lang` 属性的值为 "zh-TW" 的 <div> 元素的文本颜色设为紫色 */
/* 备注：和 JS 不同，CSS 可以在不使用双引号的情况下直接使用带连字符的属性名 */
div[data-lang="zh-TW"] {
  color: purple;
}

ID选择器

根据该元素的 id 属性中的内容匹配元素。为了使该元素被选中，它的 id 属性必须与选择器中给出的值 完全匹配 。

等价于 [id=id 属性值] { 样式声明 }。语法上等价，但优先级并不等价，id选择器 的优先级更高。

/* id 为 "demo" 的元素会被选中 */
#demo {
  border: red 2px solid;
}

注： ID选择器有一点很特殊，全局只允许有一个ID，即各标签的id属性值是 唯一 的。

关系选择器

子选择器( > )：被放在两个 CSS 选择器之间。它只匹配那些被第二个选择器匹配的元素，这些元素是被第一个选择器匹配的元素的直接子元素。
后代选择器( )：如果第二个选择器匹配的元素具有与第一个选择器匹配的 祖先（父，祖，曾祖等）元素，则它们将被选择。
接续弟弟选择器( + )：介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
后续弟弟选择器( ~ )：将两个选择器分开，并匹配第二个选择器的所有迭代元素，位置 无须紧邻 于第一个元素，只须有相同的父级元素。
CSS 选择器列表( , )：选择所有匹配的节点。选择器列表是以 逗号 分隔的多个选择器所组成的列表。

伪类

选择处于 特定状态 的元素

:active & :hover & :link & :visited

• 匹配被用户 激活 的元素
• 将光标（鼠标指针）悬停 在元素上时触发。
• 尚 未被访问 的元素，匹配每个具有 href 属性的未访问的 <a> 或 <area> 元素。
• 会在用户 访问链接后 生效，出于隐私保护的原因，使用该选择器可以修改的样式非常有限。

/* 选择所被激活的 <a> */
a:active {
  color: red;
}

a:link {
  /* 未访问链接 */
  color: blue;
}
a:visited {
  /* 已访问链接 */
  color: purple;
}
a:hover {
  /* 用户鼠标悬停 */
  background: yellow;
}
a:active {
  /* 激活链接 */
  color: red;
}

p:active {
  /* 激活段落 */
  background: #eee;
}

注 ： 为保证链接伪类样式生效，这种链接伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。

:any-link

表示作为超链接源锚点的元素，无论是否已被访问。换言之，它匹配每个具有 href 属性的 <a> 或 <area> 元素。因此，它匹配所有匹配 :link 或 :visited 的元素。

:checked

表示任何处于选中状态的 radio(<input type="radio">) , checkbox (<input type="checkbox">) 或 ("select") 元素中的 option HTML 元素 (" option ")。

/* 匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) */
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

:default

表示一组相关元素中的 默认 表单元素。

<input type="radio" name="season" id="spring" />
<label for="spring">Spring</label>

<input type="radio" name="season" id="summer" checked />
<label for="summer">Summer</label>

/* 匹配任意 <input> 元素的默认值*/
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}

:disabled

表示任何 被禁用 的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态，在启用状态下，元素可以被激活或获取焦点。

input:disabled {
  background: #ccc;
}

:enabled

表示任何 已启用 的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的。该元素还有一个被禁用的状态，在此状态下它无法被激活或接受焦点。

input:enabled {
  color: #2b2;
}

:first-child & :first-of-type

• 表示在一组兄弟元素中的 第一个元素。不区分元素类型。
• 表示一组兄弟元素中 同类型 的 第一 个元素。

注：带空格的用法为选择子元素。

<div>
  <p>此文本已选中！</p>
  <p>此文本未选中。</p>
</div>

<div>
  <h2>此文本未被选中：它不是一个 `p`。</h2>
  <p>此文本未被选中。</p>
</div>

/* p :first-child { */
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

/* p :first-of-type { */
p:first-of-type {
  color: red;
  font-style: italic;
}

:has()

表示一个元素，如果作为参数传递的任何 相对选择器 在锚定到该元素时，至少匹配一个元素。这个伪类通过把 可容错相对选择器列表 作为参数，提供了一种针对引用元素选择父元素或者哥哥元素的方法。

/*匹配所有拥有邻弟弟元素<p>的<h1> */
h1:has(+ p) {
  margin-bottom: 0;
}

/* 与 :is() 一起使用 */
:is(h1, h2, h3):has(+ :is(h2, h3, h4)) {
  margin: 0 0 0.25rem 0;
}
/* 等效于 */
:is(h1, h2, h3):has(+ h2, + h3, + h4) {/* ... */}
/* 等效于这个九个之和 */
h1:has(+ h2){/* ... */}
h1:has(+ h3){/* ... */}
h1:has(+ h4){/* ... */}
h2:has(+ h2){/* ... */}
h2:has(+ h3){/* ... */}
h2:has(+ h4){/* ... */}
h3:has(+ h2){/* ... */}
h3:has(+ h3){/* ... */}
h3:has(+ h4){/* ... */}

注：:has() 伪类不能被嵌套在另一个 :has() 内。另外，伪元素不是 :has() 内的有效选择器。

:invalid & :valid

• 选择任何 未通过 验证的 <form>、<fieldset>、<input> 或其他表单元素。
• 内容验证正确 的 <input> 或其他 <form> 元素。

input:invalid {
  background-color: #ffdddd;
}
input:valid {
  background-color: #ddffdd;
}

:is() & :where()

• 选择器列表作为参数，并选择该列表中 任意一个 选择器可以选择的元素。
• 选择所有能被该选择器列表中 任何一条 规则选中的元素。

:is(ol, ul) :is(ol, ul) ol {
  list-style-type: lower-greek;
  color: chocolate;
}

:is() 和 :where() 的区别
:is() 会计入整个选择器的优先级（它采用其最具体参数的优先级），而 :where() 的优先级为 0。

<article>
  <h2>:is()-styled links</h2>

  <footer class="is-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

<article>
  <h2>:where()-styled links</h2>

  <footer class="where-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}

footer a {
  color: blue;
}

可容错选择器解析
规范将 :is() 和 :where() 定义为接受 容错选择器列表 。
在 CSS 中，当使用选择器列表时，如果任何一个选择器无效，则整个列表将被视为无效。使用 :is() 或 :where() 时，如果一个选择器无法解析，整个选择器列表 不会被视为无效，而是会 忽略 不正确或不支持的选择器，并使用其他的选择器。

注： 伪元素在 :is() 的选择器列表中无效。

:last-child & :last-of-type

• 代表一组兄弟元素中的 最后元素 。不区分元素类型。
• 表示了在（它父元素的）子元素列表中，最后一个给定类型 的元素。

注：带空格的用法为选择子元素。

<div>
  <p>此文本未选中。</p>
  <p>此文本已选中！</p>
</div>

<div>
  <p>此文本未被选中。</p>
  <h2>此文本未被选中：它不是一个 `p`。</h2>
</div>

/* div :last-child { */
p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

:not()

用来匹配 不符合 一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为 反选伪类 （negation pseudo-class）。
选择器中不得包含另一个 否定选择器 或 伪元素 。

使用 :not() 时，有几种不寻常的效果和结果需要注意：

• 可以使用此伪类编写 无用 的选择器。例如，:not(*) 匹配任何不是元素的元素，这显然是荒谬的，所以这个附加的规则将永远不被应用。
• 可以利用这个伪类 提高 规则的优先级。例如，#foo:not(#bar) 和 #foo 都将匹配相同的元素，但是具有两个 id 的选择器具有更高的优先级。
• :not() 伪类的优先级将由其逗号分割的参数中 优先级最高 的选择器指定；提供与 :not(:is(argument)) 相同的优先级。
• :not(.foo) 将匹配任何非 .foo 的元素，包括 <html> 和 <body> 。
• 这个选择器将匹配任意 “不是一个 X” 的元素。当与后代选择器一起使用，会有意想不到的问题，因为有 多种路径 可以选择一个目标元素。例如，body :not(table) a 仍将应用 <table> 中的链接，因为 <tr>、<tbody>、<th>、<td>、<caption> 等都可以匹配选择器 :not(table) 部分。
• 你可以同时否定多个选择器。例如：:not(.foo, .bar) 等同于 :not(.foo):not(.bar) 。
• 如果传递给 :not() 伪类的选择器无效或者浏览器不支持，则整个规则都将是 无效 的。

<p>我是一个段落。</p>
<p class="fancy">我非常非常喜欢！</p>
<div>我不是一个段落。</div>
<h2>
  <span class="foo">foo 在 h2 里面</span>
  <span class="bar">bar 在 h2 里面</span>
</h2>

.fancy {
  text-shadow: 2px 2px 3px gold;
}

/* 类名不是 `.fancy` 的 <p> 元素*/
p:not(.fancy) {
  color: green;
}

/* 非 <p> 元素 */
body :not(p) {
  text-decoration: underline;
}

/* 既不是 <div> 也不是 <span> 的元素 */
body :not(div):not(span) {
  font-weight: bold;
}

/* 不是 <div> 或 `.fancy` 的元素*/
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/* <h2> 元素中不是有 `.foo` 类名的 <span> 元素 */
h2 :not(span.foo) {
  color: red;
}

:nth-child() & :nth-last-child() & :nth-of-type() & :nth-last-of-type()

• 根据元素在父元素的子元素列表中的 索引 来选择元素。换言之，:nth-child() 选择器根据父元素内的所有 兄弟元素 的位置来选择子元素。元素索引从 1 开始。
• 从 兄弟 节点中 从后往前 匹配处于某些位置的元素。
• 基于 相同类型（标签名称）的兄弟元素中的位置来匹配元素。
• 基于元素在 相同类型（标签名）的兄弟元素中相对 最后一个 元素的位置来匹配元素。

注：带空格的用法为选择 子元素 。

语法

:nth-child(<nth> [of <complex-selector-list>]?) {
  /* ... */
}

:nth-last-child(<nth> [of <complex-selector-list>]?) {
  /* ... */
}

:nth-of-type(<an-plus-b> | even | odd) {
  /* ... */
}

:nth-last-of-type(<an-plus-b> | even | odd) {
  /* ... */
}

关键字值：
odd : 表示元素在兄弟元素列表中的位置是奇数：1、3、5……。
even : 表示元素在兄弟元素列表中的位置是奇数：1、3、5……。
<An+B> : 表示元素在兄弟元素列表中的位置是 An+B 模式的元素，其中 n 为正整数或 0，A 和 B 为整数，且 A 不为 0。其中：A 是整数步长，B 是整数偏移量，n 是从 0 开始的所有非负整数。它可以被理解为列表中的第 An+B 个元素。A 和 B 必须都是 <integer> 值。
of <selector> 语法 : 通过传递一个选择器参数，可以选择与该选择器匹配的第 n 个元素。

体会 of 使用与否和 *-type 使用与否的区别：

<ul class="one">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>
<ul class="two">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>
<ul class="three">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>

ul.one > li:nth-child(-n + 3 of .noted) {
    background-color: tomato;
    border-bottom-color: seagreen;
}

ul.two > li.noted:nth-child(-n + 3) {
    background-color: tomato;
    border-bottom-color: seagreen;
}
ul.three > li.noted:nth-of-type(-n + 3) {
    background-color: tomato;
    border-bottom-color: seagreen;
}

:only-child & :only-of-type

• 表示没有任何兄弟元素的元素。这与 :first-child:last-child 或 :nth-child(1):nth-last-child(1) 相同，但前者具有更小的权重性。
• 任意一个元素，这个元素没有其他 相同类型 的兄弟元素。

注：带空格的用法为选择子元素。

<div>
  <div>我是唯一子元素。</div>
</div>

<div>
  <div>我是第一个兄弟元素。</div>
  <div>我是第二个兄弟元素。</div>
  <div>
    我是第三个兄弟元素。
    <div>但这又是唯一的子元素。</div>
  </div>
</div>

div:only-child {
  color: red;
}

div {
  display: inline-block;
  margin: 6px;
  outline: 1px solid;
}

伪元素

像你往标记文本中 加入 全新的 HTML 元素一样，而不是向现有的元素上应用类。

::after & ::before

• 作为所选元素的 最后一个子元素 。它通常用于为具有 content 属性的元素添加修饰内容。默认情况下，它是 行向 布局的。
• 成为匹配选中的元素的 第一个子元素 。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认是行级的。

注：::before 和 ::after 生成的伪元素是行级盒子，就好像它们是应用它们的元素或“源元素”的 直接子元素 ，因此不能应用于可替换元素（如 <img>），它们的内容在不受当前文档样式的影响的情况下被替换。

::first-letter & ::first-line (:first-line)

• 将样式应用于 区块 容器 第一行 的 第一个字母 ，但仅当其前面没有其他内容（例如图像或行内表格）时才有效。
• 将样式应用于区块容器的 第一行。

::first-letter特殊的匹配情况：

• 第一个字母之前或紧随其后的标点符号也包含在匹配中。标点符号包括在 Unicode 中定义的开始括号（Ps）、结束括号（Pe）、起始引号（Pi）、*结束引号（pf）和其他标点符号（po）*类别的任何字符。
• 有些语言的数字符总是一起大写，如荷兰语中的 IJ。在这种情况下，数字的两个字母都应与 ::first-letter 伪元素匹配。
• ::before 伪元素和 content 属性的组合可能会在元素开头注入一些文本。在这种情况下，::first-letter 将匹配 生成内容 的第一个字母。

简单的下沉式首字母:

<h2>我的标题</h2>
<p>
  人的心只容得下一定程度的绝望，海绵已经吸够了水，即使大海从它上面流过，也不能再给它增添一滴水了。文学就像炉中的火一样，我们从人家借得火来，把自己点燃，而后传给别人，以致为大家所共同拥有。魂牵梦萦在江南，有一片土地，名唤故乡；对酒当歌在烟雨，有一份情愫，称作痴迷。
</p>
<p>世界上最宽阔的是海洋，比海洋更宽阔的是天空，比天空更宽阔的是人的心灵。</p>

p {
  width: 500px;
  line-height: 1.5;
}

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

::first-line的匹配规则：
::first-line 伪元素只能在 块容器 中，所以，::first-line伪元素只能在一个 display 值为 block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中，::first-line 是不起作用的。
首行字母大写：

<p>
  On the day of victory, I searched by the Fangsi River, and the boundless scenery was suddenly renewed.
</p>

p::first-line {
    text-transform: uppercase;
}

注：在 CSS 2 中，伪元素是以 : 开头的。由于 伪类 也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在 CSS 2.1 中，伪元素 支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。
因为过去的浏览器都实现过 CSS 2 的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。

::marker

匹配 列表 的标记框（通常为一个符号或数字）。它作用在任何设置了 display: list-item 的元素或伪元素上，例如 <li> 和 <summary> 元素。

<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>

ul li::marker {
  color: red;
  font-size: 1.5em;
}

::selection

应用于文档中被用户 高亮 的部分（比如使用鼠标或其他选择设备选中的部分）。

This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

/* 选中的文本是红色背景，金黄色的字体 */
::selection {
  color: gold;
  background-color: red;
}

/*选中的是蓝色背景，白色的字体的段落*/
p::selection {
  color: white;
  background-color: blue;
}

总结

总结了一下常用的、支持度高的选择器。基础选择器加伪类、伪元素随意组合可选择到任何对象，再结合一下各类属性，花里胡哨的效果宛如繁花盛开。
CSS如渊似域，各位共同进步😃

---

🎉完结撒花🎉 💖点个赞呀💖