介绍

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

通过 CSS - 基础篇我们知道了什么是选择器，但是选择器 实际上是有很多种的，不同情况下，使用不同的选择器，接下来我们就看看有多少种选择器吧。

CSS选择器

常用的选择器类型：

• 类型选择器｜元素选择器 ｜ 标签选择器
• 通配选择器
• ID选择器
• Class选择器 ｜ 类选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器
• 后代选择器
• 子代选择器
• 相邻兄弟选择器
• 通用兄弟选择器

注意： 选择器是可以组合使用的！

选择器列表

如果你有多个使用相同样式的 CSS 选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了，如下：

h1 , h2 {
  color: blue;
}

1、 类型选择器｜元素选择器 ｜ 标签选择器

通过 node 节点名称 匹配元素。
因此，在单独使用时，寻找特定类型的元素时，元素选择器都会匹配该文档中所有此类型的元素。

示例：

.html
<h1>我是标题</h1>

.css
h1 {
  ...
}

h1 { } 就是类型选择器。直接通过HTML标签名称匹配。

2、通配选择器

在 CSS 中，一个星号 (*) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。
在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。

在 CSS3 中，星号 (*) 可以和命名空间组合使用：

• ns|* - 会匹配ns命名空间下的所有元素
• *|* - 会匹配所有命名空间下的所有元素
• |* - 会匹配所有没有命名空间的元素

不推荐使用通配选择器，因为它是性能最低的一个 CSS 选择器。

3、ID选择器

在一个 HTML 文档中，CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素，元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

示例：

.html
<p id="p1">我是段落</p>

.css
#p1 {
  ...
}

#p1 { } 即使ID选择器。在HTML标签元素中，需要添加属性 id="..."，需要用到#来匹配。

4、Class选择器 ｜ 类选择器

在一个 HTML 文档中，CSS 类选择器会根据元素的类属性中的内容匹配元素。
类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。

示例：

.html
<p class="p1">我是段落</p> 

.css
.p1 {
  ...
}

.p1{ } 就是Class选择器。在HTML标签元素中，需要添加属性 class="..."，需要用到.来匹配。

5、标签属性选择器 ｜ 属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

语法：

• [attr]：表示带有以 attr 命名的属性的元素。

• [attr=value]：表示带有以 attr 命名的属性，且属性值为 value 的元素。

• [attr~=value]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

• [attr|=value]：表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀开头。典型的应用场景是用来匹配语言简写代码。（如 zh-CN，zh-TW 可以用 zh 作为 value）。（"-"为连字符，Unicode 编码为 U+002D）。

• [attr^=value]：表示带有以 attr 命名的属性，且属性值是以 "value"开头的元素。

• [attr$=value]：表示带有以 attr 命名的属性，且属性值是以 "value"结尾的元素。

• [attr*=value]：表示带有以 attr 命名的属性，且属性值至少包含一个 "value" 值的元素。

• [attr operator value i]：在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

• [attr operator value s]：在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

示例：

.html
<a href="https://www.baidu.com" title="baidu">百度一下</a>
<a class="xxxlogo" href="https://www.XXX.com" title="xxx">百度一下</a>

• 存在 title属性的<a> 元素

a[title] {
  color: purple;
}

• 存在href 属性并且属性值匹配"https://www.baidu.com"的<a> 元素

a[href="https://www.baidu.com"] {
  color: green;
}

• 存在 href 属性并且属性值包含"XXX"的<a>元素

a[href*="XXX"] {
  font-size: 2em;
}

• 存在 href 属性并且属性值结尾是".com"的<a>元素

a[href$=".com"] {
  font-style: italic;
}

• 存在 class 属性并且属性值包含以空格分隔的"logo"的<a>元素

a[class~="logo"] {
  padding: 2px;
}

多语言属性

示例：

• 将所有包含 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> 元素的文本颜色设为紫色

div[data-lang="zh-TW"] {
  color: purple;
}

备注：和 JS 不同，CSS 可以在不使用双引号的情况下直接使用带连字符的属性名

6、伪类选择器

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。像导航历史（:visited）、内容状态（:checked）、鼠标位置（:hover）。

示例：

.html
<a href="https://www.baidu.com" title="baidu">百度一下</a>

.css
a:hover { 
  ...
}

a:hover{ } 就是伪类选择器。a:hover{ }意思表示 在鼠标指针悬浮到一个<a>标签上的时候，需要展示的样式。

标准伪类索引

• :active : 匹配被用户激活的元素。

它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

一般被用在 <a>和 <button>元素中。这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的<label>标签被激活的表格元素。

这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link，:hover 和 :visited。为保证样式生效，需要把 :active 的样式放在所有链接相关的样式之后。

这种链接伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。

示例：

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

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

form :active {
  color: red;
}

• :hover：适用于用户使用指示设备虚指一个元素（没有激活它）的情况。

可以在任何伪元素上使用，遵循 LVHA 的先后顺序。

示例：
使用:hover 伪类可以创建复杂的层叠机制。一个常见用途，比如，创建一个纯 CSS 的下拉按钮（不使用 JavaScript）。

.css
div.menu-bar ul ul {
  display: none;
}
div.menu-bar li:hover > ul {
  display: block;
}

.html
<div class="menu-bar">
  <ul>
    <li><a href="example.html">Menu</a>
      <ul>
        <li><a href="example.html">Link</a></li>
        <li><a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li><a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

代码解析:
在读懂这个示例之前，你要先熟悉 后代选择器 、子代选择器、以及CSS block属性。

备注： 在触摸屏上 :hover 有问题，基本不可用。不同的浏览器上:hover 伪类表现不同。
:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。

• :link：用来选中元素当中的链接。

它将会选中所有 尚未访问 的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover、..等)
遵循 LVHA 的先后顺序。

示例：

a:link {
  color: slategray;
}

• :visited：表示用户已访问过的链接。

出于隐私原因，可以使用此选择器修改的样式非常有限。
遵循 LVHA 的先后顺序。

示例：

a:visited {
  color: green;
}

限制：出于隐私原因，浏览器严格限制您可以让此伪类应用的样式，以及使用它们的方式：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited

• :focus：表示获得焦点的元素（如表单输入）。

当用户点击或触摸元素或通过键盘的“tab”键选择它时会被触发。

示例：

input:focus {
  color: red;
}

• :focus-visible：可以有效地根据用户的输入方式 (鼠标 vs 键盘) 展示不同形式的焦点。

当元素匹配:focus伪类并且客户端 (UA) 的启发式引擎决定焦点应当可见 (在这种情况下很多浏览器默认显示“焦点框”。) 时，:focus-visible伪类将生效。

.css
input, button {
  margin: 10px;
}
.focus-only:focus {
  outline: 2px solid black;
}
.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

.html
<input value="Default styles"><br>
<button>Default styles</button><br>
<input class="focus-only" value=":focus only"><br>
<button class="focus-only">:focus only</button><br>
<input class="focus-visible-only" value=":focus-visible only"><br>
<button class="focus-visible-only">:focus-visible only</button>

Firefox 通过较旧的前缀伪类 :-moz-focusring 支持类似的功能。

• :focus-within：

• :any-link：
• :blank：
• :checked：
• :default：
• :defined：
• :dir(...)：
• :disabled：
• :drop：被舍弃了
• :empty：
• :enabled：
• :first：
• :first-child：
• :first-of-type：
• :fullscreen：
• :has(...)：
• :host：
• :host(...)：
• :host-context：
• :indeteminate：
• :in-range：
• :invalid：
• :is(...)：
• :lang(...)：
• :last-child：
• :left：
• :local-link：
• :not(...)：
• :nth-child(...)：
• :nth-col(...)：
• :nth-last-child：
• :nth-last-col(...)：
• :nth-last-of-type(...)：
• :nth-of-type：
• :only-child：
• :only-of-type：
• :optional：
• :out-of-range：
• :past：
• :placeholder-shown：
• :read-only：
• :read-write：
• :required：
• :right：
• :root：
• :scope：
• :target：
• :target-within：
• :target-invalid：
• :user-invalid：
• :valid：
• :where：

太多了，后期慢慢更新吧，自己有兴趣的可以去自己看 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

7、伪元素选择器

伪元素 是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

实例：::first-line伪元素可改变段落首行文字的样式。

.csss
p::first-line{
  color: blue;
  text-transform: uppercase;
}

注意：

• 一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

• 按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。
  但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

规范定义的伪元素

• ::after (:after)：
• ::backdrop：
• ::before (:before)：
• ::cue：
• ::cue-region：
• ::first-letter (:first-letter)：
• ::first-line (:first-line)：
• ::file-selector-button：
• ::grammar-error：
• ::marker：
• ::part(...)：
• ::placeholder：
• ::selection：
• ::slotted()：
• ::spelling-error：
  -::target-text：

太多了，后期慢慢更新吧，自己有兴趣的可以去自己看 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

8、后代选择器 （所有后代）

官方： 后代组合器 通常用单个空格（" "）字符表示，组合了两个选择器。
如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。利用后代组合器的选择器称为后代选择器。

就是 两个选择器 以空格相隔开 组成 后台选择器。使用条件如下：

• 1、第二个选择器匹配的元素 必须是 第一个选择器匹配的元素 的 子元素 ｜ 子子...元素 ，这样样式才会生效。
• 2、后代选择器匹配的元素样式 是显示在 所有的 第二个选择器匹配的元素 上的，无论在 DOM 中"跳跃" 多少次。

示例：

.css
div p{
    color: green;
    padding: 0px;
    margin: 0px;
}
.html
<div id="d1" class="d1">111111
    <p>222222</p>
    <p>333333
        <p>444444</p>
    </p>
    <div>555555
        <p>666666
            <p>777777</p>
        </p>
    </div>
</div>

9、子代选择器 (直接后代、 一级子元素)

当使用> 选择符分隔两个元素时，它只会匹配那些作为第一个元素的直接后代 (子元素) 的第二元素。

示例：

.css
span { background-color: white; }
div > span {
  background-color: DodgerBlue;
}
.html
<div>
  <span>Span 1. In the div.
    <span>Span 2. In the span that's in the div.</span>
  </span>
</div>
<span>Span 3. Not in a div at all</span>

10、相邻兄弟选择器

通过 + 介于两个选择器之间进行组合的选择器。
当第二个元素 紧跟在 第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

示例：

.css
p + p {
    color: red;
    padding: 0px;
    margin: 0px;
}
.html
<p>first</p>
<p>second</p>
<p>third
    <p>third-child</p>
    <p>third-child</p>
</p>
<h4>标题</h4>
<p>four</p>
<p>five</p>
<p>six</p>

如果中间插入其他的元素，会断掉的，但是会在后续的匹配元素继续按照规则进行样式的设置。

11、通用兄弟选择器

兄弟选择符~，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。

示例：

.css
p ~ p {
    color: red;
    padding: 0px;
    margin: 0px;
}
.html
<p>first</p>
<p>second</p>
<p>third
    <p>third-child</p>
    <p>third-child</p>
</p>
<h4>标题</h4>
<p>four</p>
<p>five</p>
<p>six</p>

如果中间插入其他的元素，不会断掉。可与相邻兄弟选择器比较，进行观察。