CSS 选择器

众所周知css有着丰富的选择器，每种选择器有着不同的优先级，它们影响着页面的样式，今天就来学习一下选择器的基本知识吧。

常见选择器

以下按照选择器优先级排列👇

用于选择特定的 HTML 标签，例如：

h1 {
  color: red;
}

用于向特定元素的某个部分应用样式，例如：

p::first-letter {
  font-size: 24px;
}

用于选择特定状态的元素，例如：

cssCopy code
a:hover {
  color: red;
}

用于选择具有特定属性或属性值的元素，例如：

cssCopy code
input[type="text"] {
  border: 1px solid #ccc;
}

用于选择具有特定类名的元素，类名以点号开头，例如：

cssCopy code
.example {
  color: blue;
}

用于选择具有特定 ID 的元素，ID 以井号开头，例如：

#header {
  font-size: 24px;
}

用于选择某个元素的直接子元素，符号为 >，例如：

ul > li {
  list-style: none;
}

用于选择某个元素的后代元素，例如：

ul li {
  margin-bottom: 10px;
}

用于选择紧接在另一个元素后面的元素，符号为 +，例如：

h1 + p {
  font-style: italic;
}

用于选择在另一个元素后面的所有元素，符号为 ~，例如：

h1 ~ p {
  margin-top: 20px;
}

选择器的特殊性是一个四元组，其中每个元素代表一种选择器的数量，从左到右依次是：

例如，以下选择器的特殊性分别为：

h1                /* 0, 0, 1, 0 */
#header           /* 0, 1, 0, 0 */
ul li a:hover     /* 0, 0, 3, 1 */
.example          /* 0, 0, 1, 0 */

当存在多个选择器时，它们的特殊性可以通过加法来计算。例如：

h1 + #header.example {
  /* 0 + 1 + 1 + 0 = 2 */
}

!important 声明具有最高的优先级，会覆盖所有其他规则，但应该尽量避免使用。

如果两个规则具有相同的特殊性和 !important 声明，则最后声明的规则具有更高的优先级。

继承的样式具有低优先级，如果一个元素的子元素有自己的样式，则子元素的样式将覆盖继承的样式。

需要注意的是，选择器的优先级是无法通过简单比较选择器字符串来确定的。虽然类选择器和属性选择器都具有相同的特殊性，但它们的优先级不同，因为它们是不同类型的选择器。例如，以下样式表中的 .example 类选择器具有比 [type="submit"] 属性选择器更高的优先级：

[type="submit"] {
  color: blue;
}

.example {
  color: red;
}

因此，在编写 CSS 样式时，需要仔细考虑选择器的特殊性和优先级，以避免出现不必要的冲突和覆盖