CSS 选择器

元素选择器

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

标签选择器的级联语法：

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

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

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

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

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

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

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

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

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

[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;
}