【面试题解】详解前端基石-CSS选择器

本文来系统的学习一下 CSS 选择器相关的内容。

1.id选择器

ID 选择器以 # 开头，它选择的是文档中 id 属性的值。

  /* 这会让id等于app的元素的背景变为红色 */
  #app {
    background: red
  }
  /* 这会让id等于box的元素的背景变为绿色 */
  #box {
    background: green
  }

2.类选择器

类选择器以一个句点（.）开头，它选择的是文档中应用了这个类的所有元素。

  /* 这会让class等于app的元素的背景变为红色 */
  .app {
    background: red
  }
  /* 这会让class等于box的元素的背景变为绿色 */
  .box {
    background: green
  }

3.标签选择器

有时也叫做 类型选择器 或者是 元素选择器，因为它在文档中选择的是 HTML 标签/元素。

  /* 这会让所有的div标签的背景变为红色 */
  div {
    background: red
  }
  /* 这会让所有的span标签的背景变为蓝色 */
  span {
    background: blue
  }
  /* 这会让所有的p标签的背景变为绿色 */
  p {
    background: green
  }

4.交集选择器

相交的部分就是要设置属性值的标签。选择器之间没有任何的连接符号（也不允许出现空格），选择器可以是标签名称，也可以是 id、class 名称。

  /* 
    格式:
    选择器1选择器2...{
        属性:值;
    }
  */
  /* 这会让id等于app的div标签的背景变为红色 */
  div#app {
    background: red
  }
  /* 这会让class等于app的span标签的背景变为蓝色 */
  span.app {
    background: blue
  }
  /* 这会让id等于box的p标签的背景变为绿色 */
  p#box {
    background: green
  }

5.并集选择器

并集选择器，选择器之间利用（，）连接，选择器可以是标签名称，也可以是 id、class 名称。

  /* 
    格式:
    选择器1选择器2...{
        属性:值;
    }
  */
  /* 这会让所有的class等于app的标签以及所有的p标签的背景变为红色 */
  .app,p {
    background: red
  }

6.通配符选择器

也称为“全局选择器”，由一个星号（*）代指，它选中了文档中的所有内容或者是父元素中的所有内容。

<style>
  /* 这会让所有元素的背景变为红色 */
  * {
    background: red;
  }
  /* 这会让#app中所有元素的文字变为绿色 */
  #app * {
    color: green;
  }
</style>

7.后代选择器

后代选择器，用单个空格（）字符组合两个选择器，匹配第祖先元素中所有的对应元素。

<style>
  /* 这会让class=box的元素里面所有后代的div标签的背景变为红色 */
  .box1 div {
    background: red;
  }
</style>

8.子代选择器

子代选择器，用单个大于号（>）组合两个选择器，只会在直接子元素中进行匹配。继承关系上更远的后代则不会匹配。

<style>
  /* 这会让class=box的元素里面相邻后代（子代）所有的div标签的背景变为红色 */
  .box1 > div {
    background: red;
  }
</style>

9.兄弟选择器

兄弟选择器，使用（~）组合两个选择器。但是要注意：

• 兄弟元素之间可以存在其他元素；
• 只能选择元素后面的兄弟元素。

<style>
  /* 这会让span元素所有的兄弟p标签的背景变为红色 */
  span ~ p {
    background: red;
  }
</style>

10.相邻兄弟选择器

兄弟选择器，使用（+）组合两个选择器。但是要注意：

• 兄弟元素之间不可以存在其他元素；
• 只能选择元素后面的兄弟元素。

<style>
  /* 这会让span元素的第一个兄弟p标签的背景变为红色 */
  span ~ p {
    background: red;
  }
</style>

11.属性选择器

顾名思义，是根据标签的属性进行选择的选择器，大概分为以下七种。

[attr]

示例：[name]，选择带有 name 属性的所有元素。

  [name] {
    background: red;
  }

[attr=value]

示例：[name="hzw"]，选择 name 属性值等于 hzw 的所有元素。

  [name='hzw'] {
    background: red;
  }

[attr~=value]

示例：[name~="hzw"]，选择 name 属性包含单词 hzw 的所有元素。注意：必须是整个单词，多个单词使用空格隔开。

  [name~='hzw'] {
    background: red;
  }

[attr|=value]

示例：[name|="hzw"]，选择 name 属性值以 hzw 开头的所有元素。注意：必须是整个单词或者中间有连字符的单词。

  [name|='hzw'] {
    background: red;
  }

[attr^=value]

示例：[name^="hzw"]，选择其 name 属性值以 hzw 开头的所有元素。无限制。

  [name^='hzw'] {
    background: red;
  }

[attr$=value]

示例：[name$="hzw"]，选择其 name 属性以 hzw 结尾的所有元素。

  [name$='hzw'] {
    background: red;
  }

[attr*=value]

示例：[name*="hzw"]，选择其 name 属性值中包含 hzw 子串的所有元素。无限制。

  [name*='hzw'] {
    background: red;
  }

12.伪类选择器

伪类表示被选择元素的某种状态。

:active 匹配用户正在激活（例如点击）元素。

:any-link 匹配一个链接的:link和:visited状态。

:blank 匹配空输入值的 input 元素。

:checked 匹配处于选中状态的单选或者复选框。

:current 匹配正在展示的元素，或者其上级元素。

:default 匹配一组相似的元素中默认的一个或者更多的 UI 元素。

:dir 基于其方向性（ HTML dir 属性或者 CSS direction 属性的值）匹配一个元素。

:disabled 匹配处于关闭状态的用户界面元素。

:empty 匹配除了可能存在的空格外，没有子元素的元素。

:enabled 匹配处于开启状态的用户界面元素。

:first 匹配分页媒体的第一页。

:first-child 匹配兄弟元素中的第一个元素。

:first-of-type 匹配兄弟元素中第一个某种类型的元素。

:focus 当一个元素有焦点的时候匹配。

:focus-visible 当元素有焦点，且焦点对用户可见的时候匹配。

:focus-within 匹配有焦点的元素，以及子代元素有焦点的元素。

:future 匹配当前元素之后的元素。

:hover 当用户悬浮到一个元素之上的时候匹配。

:indeterminate 匹配未定态值的UI元素，通常为复选框。

:in-range 用一个区间匹配元素，当值处于区间之内时匹配。

:invalid 匹配诸如 input 的位于不可用状态的元素。

:lang 基于语言（ HTMLlang 属性的值）匹配元素。

:last-child 匹配兄弟元素中最末的那个元素。

:last-of-type 匹配兄弟元素中最后一个某种类型的元素。

:left 在分页媒体中，匹配左手边的页。

:link 匹配未曾访问的链接。

:local-link 匹配指向和当前文档同一网站页面的链接。

:is() 匹配传入的选择器列表中的任何选择器。

:not 匹配作为值传入自身的选择器未匹配的物件。

:nth-child 匹配一列兄弟元素中的元素——兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。

:nth-of-type 匹配某种类型的一列兄弟元素（比如 p 元素）——兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7等。即所有的奇数个）。

:nth-last-child 匹配一列兄弟元素，从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。

:nth-last-of-type 匹配某种类型的一列兄弟元素（比如 p 元素），从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。

:only-child 匹配没有兄弟元素的元素。

:only-of-type 匹配兄弟元素中某类型仅有的元素。

:optional 匹配不是必填的 form 元素。

:out-of-range 按区间匹配元素，当值不在区间内的的时候匹配。

:past 匹配当前元素之前的元素。

:placeholder-shown 匹配显示占位文字的input元素。

:playing 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。

:paused 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。

:read-only 匹配用户不可更改的元素。

:read-write 匹配用户可更改的元素。

:required 匹配必填的 form 元素。

:right 在分页媒体中，匹配右手边的页。

:root 匹配文档的根元素。

:scope 匹配任何为参考点元素的的元素。

:valid 匹配诸如 input 元素的处于可用状态的元素。

:target 匹配当前 URL 目标的元素（例如如果它有一个匹配当前 URL 分段的元素）。

:visited 匹配已访问链接。

13.伪元素选择器

伪元素表示的是被选择元素的某个部分，但是是只存在于 CSS 中的"假元素"，不出现在 HTML 中，所以叫"伪"元素。

::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。

::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。

::first-letter 匹配元素的第一个字母。

::first-line 匹配包含此伪元素的元素的第一行。

::grammar-error 匹配文档中包含了浏览器标记的语法错误的那部分。

::selection 匹配文档中被选择的那部分。

::spelling-error 匹配文档中包含了浏览器标记的拼写错误的那部分。

选择器的权重

既然我们的 CSS 选择器有这么多种，那么我们怎么知道谁生效谁无效呢？那就要通过权重来计算了。CSS 选择器的权重计算遵循以下规则：

• 选择器的权重可以相加，数值越大，权重越大，两种选择器覆盖同一属性时，权重大的选择器生效；
• 通配符选择器的权重为 0 ；
• 标签选择器、伪元素选择器：1；
• 类选择器、伪类选择器、属性选择器：10，
• id 选择器：100；
• 内联样式：1000；
• !important 声明的样式的权重最高；
• 继承得到的样式的权重最低；
• 由于 HTML 代码的执行特点时从上往下执行，因此在权重相同的情况下，后面的选择器会覆盖前面的选择器相同的属性；
• 伪类选择器和属性选择器的权重相当于类选择器的权重，伪元素选择器的权重相当于元素选择器的权重；
• 子代，后代和兄弟有可能是元素选择器、类选择器、id选择器，因此要根据具体情况来具体分析。
• CSS 里面的进制并不是 10 进制，而是 256 进制，所以 10 个低级选择器并不能等于 1 个高级选择器。
• 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

参考文献

CSS选择器