CSS 选择器

元素选择器

元素选择器主要分为2种：标签选择器和通配符选择器。

标签选择器

标签选择器的级联语法：

标签选择器不能重复自身；
标签选择器必须写在最前面；

/* 选择所有 <p> 元素 */
p {
  color: red;
}

通配符选择器

通配符选择器是一种特殊的标签选择器，用于选择所有元素。在项目中通常用于重置CSS样式，抹平不同浏览器之间的差异。

/* 选择所有元素 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

属性选择器

属性选择器用于选择具有特定属性的元素。

ID选择器

ID选择器用于选择具有特定ID的元素。ID选择器以 # 开头，在语义上ID选择器应该唯一，不应该重复使用。但是实际开发过程中如果重复了也是可以选中的，但是不推荐这样使用。

/* 选择具有 id="main" 的元素 */
#main {
  background-color: #f0f0f0;
}

类选择器

类选择器用于选择具有特定类的元素。类选择器以 . 开头，一个元素可以有多个类。

/* 选择具有 class="container" 的元素 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

属性值选择器

属性值选择器用于选择具有特定属性值的元素。属性选择器以 [ 开头，以 ] 结尾，主要包含以下几种类型：

[attr]
[attr="val"]
[attr~="val"]
[attr|="val"]
[attr^="val"]
[attr$="val"]
[attr*="val"]

[attr]: 选择具有 attr 属性的元素，无论属性值为何值。

[disabled] {
  color: red;
}

[attr=“val”]: 选择具有 attr 属性且属性值为 val 的元素。

[lang="en"] {
  font-family: Arial, sans-serif;
}

[attr~=“val”]: 选择具有 attr 属性且属性值包含 val 的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 val。

<link rel="author publisher" href="https://example.com/author">
<link rel="author-test" href="https://example.com/publisher">

/* 只匹配第一个 */
[rel~="author"] {
  font-weight: bold;
}

[attr|=“val”]: 选择具有 attr 属性且属性值为 val 或以 val- 开头的元素。

匹配 lang="zh" 和 lang="zh-CN"

[lang|="zh"] {
  cursor: pointer;
}

[attr^=“val”]: 选择具有 attr 属性且属性值以 val 开头的元素。

[href^="https://"] {
  color: blue;
}

[attr$=“val”]: 选择具有 attr 属性且属性值以 val 结尾的元素。

[href$=".pdf"] {
  color: red;
}

*[attr=“val”]**: 选择具有 attr 属性且属性值包含 val 的元素。

[href*="github.com"] {
  color: green;
}

属性值选择器中匹配值时使用单引号或者双引号都可以，如果值没有空格的话，可以不使用引号。

属性值选择器中的正则

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

/* 选择所有 class 属性值包含 "test" 的元素，不区分大小写 */
[class*="test" i] {
  color: red;
}

伪类

用户行为伪类

手势经过伪类 `:hover`

当鼠标经过元素时触发，在桌面端网页上非常常用（比如鼠标悬浮时改变按钮背景颜色），在移动端基本不使用。

.btn:hover {
  background-color: pink;
}

激活状态伪类 `:active`

:active 可以设置元素激活状态的样式，当鼠标点击、手指触摸时触发激活状态，点击抬起时取消激活状态。:active 支持任何 HTML 元素。

p:active {
  color: orchid;
}

焦点伪类 `:focus`

:focus 用于匹配当前处于聚焦状态的元素：

非 disabled 状态的表单元素，如 <input>、<select> 等；
包含 href 的 <a>元素；
<area> 元素（只支持有限的CSS属性）；
<summary> 元素；
设置了 contenteditable 属性的其他元素；
设置了 tabindex 属性的其他元素；

整体焦点伪类 `:focus-within`

:focus-within 用于匹配当前元素或其后代元素处于聚焦状态时，当前元素的样式。

<div class="input-wrapper">
  <input type="text" />
</div>

.input-wrapper:focus-within {
  border: 1px solid red;
}

键盘焦点伪类 `:focus-visible`

:focus-visible 用于匹配当前元素处于聚焦状态且需要显示焦点指示器时，当前元素的样式。通常在用户使用键盘导航时触发。

button:focus-visible {
  outline: 2px solid blue;
}