CSS选择器以及这些选择器的优先级

一、css选择器的类型

• !important
• 内联样式（1000）
• ID选择器（0100）
• 类选择器/属性选择器/伪类选择器（0010）
• 元素选择器/伪元素选择器（0001）
• 关系选择器/通配符选择器（0000）

二、CSS 选择器可以根据其匹配规则分为以下几类

1.基本选择器

• 元素选择器：选择指定类型的 HTML 元素。

p {
   color: red;
}

• 类选择器：选择具有指定 class 属性的元素。

.text {
  font-size: 16px;
}

• ID 选择器：选择具有指定 id 属性的元素。

#header {
  background-color: blue;
}

• 通配符选择器：选择所有元素。

* {
  margin: 0;
  padding: 0;
}

2. 组合选择器

• 后代选择器：选择某个元素的后代元素。

div p {
  color: green;
}

• 子元素选择器：选择某个元素的直接子元素。

ul > li {
  list-style: none;
}

• 相邻兄弟选择器：选择紧接在某个元素后的兄弟元素。

h1 + p {
  font-weight: bold;
}

• 通用兄弟选择器：选择某个元素后的所有兄弟元素。

h1 ~ p {
  color: gray;
}

3. 属性选择器

• 根据元素的属性选择元素。

/* 选择具有 title 属性的元素 */
[title] {
  color: purple;
}

/* 选择 href 属性值以 "https" 开头的元素 */
a[href^="https"] {
  color: green;
}

/* 选择 class 属性包含 "btn" 的元素 */
[class*="btn"] {
  background-color: yellow;
}

4. 伪类选择器

• 选择处于特定状态的元素。

/* 选择鼠标悬停的链接 */
a:hover {
  color: red;
}

/* 选择第一个子元素 */
p:first-child {
  font-size: 20px;
}

/* 选择表单中已选中的单选按钮 */
input[type="radio"]:checked {
  border-color: blue;
}

5. 伪元素选择器

• 选择元素的特定部分。

/* 选择段落的第一行 */
p::first-line {
  font-weight: bold;
}

/* 在元素内容前插入内容 */
p::before {
  content: "→ ";
}

/* 选择用户选中的文本 */
::selection {
  background-color: yellow;
}

三、CSS 选择器的优先级

当多个选择器匹配同一个元素时，浏览器会根据选择器的优先级（Specificity）决定应用哪个样式。优先级由选择器的类型和组合方式决定。

1. 优先级计算规则

• 优先级由四个部分组成，按重要性从高到低排列：
  1. 内联样式（style 属性）：优先级最高。
  2. ID 选择器：每个 ID 选择器加 0,1,0,0。
  3. 类选择器、属性选择器、伪类选择器：每个加 0,0,1,0。
  4. 元素选择器、伪元素选择器：每个加 0,0,0,1。

2. 优先级示例

• #header .nav a：0,1,1,1（1 个 ID，1 个类，1 个元素）。
• div p：0,0,0,2（2 个元素）。
• .btn.active：0,0,2,0（2 个类）。
• a:hover：0,0,1,1（1 个伪类，1 个元素）。

3. 优先级比较

• 从左到右逐级比较，数值大的优先级高。

• 例如：

  • 0,1,0,0 > 0,0,2,0（ID 选择器优先级高于类选择器）。
  • 0,0,1,0 > 0,0,0,2（类选择器优先级高于元素选择器）。

4.  !important 规则

• 在样式声明后添加 !important 可以覆盖其他规则。
• 例如：

p {
  color: red !important;
}

• 注意：滥用 !important 会导致样式难以维护，应尽量避免。

四、总结

1. 选择器类型：

   • 基本选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器。

2. 优先级规则：

   • 内联样式 > ID 选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器。
   • 优先级相同时，后定义的样式生效。

3. 避免滥用 !important：

   • 仅在必要时使用，否则会导致样式难以维护。