CSS 选择器知识点总结

这篇文章的内容是 CSS 的选择器，这是写页面样式的第一步，知道 CSS 有哪些选择器是每个前端工程师必会的内容之一。

一、什么是 CSS 中的选择器？

CSS 中的选择器用于选择要应用样式的 HTML 元素。选择器是 CSS 中的关键部分，允许你精确地定位和样式化特定的元素或元素组。

二、常见的 CSS 选择器及其用法：

1.元素选择器（Element Selector）：选择特定的 HTML 元素类型。例如，要选择所有段落元素，使用 p 选择器：

p {
  /* 样式规则在这里 */
}

2.类选择器（Class Selector）：选择具有特定类名的元素。类选择器以点 . 开头，后面跟类名。例如，要选择所有类名为 "highlight" 的元素，使用 .highlight 选择器：

.highlight {
  /* 样式规则在这里 */
}

3.ID 选择器（ID Selector）：选择具有特定 ID 的元素。ID 选择器以井号 # 开头，后面跟元素的 ID。注意，每个页面应该只有一个具有唯一 ID 的元素。例如，要选择 ID 为 "header" 的元素，使用 #header 选择器：

#header {
  /* 样式规则在这里 */
}

4.后代选择器（Descendant Selector）：选择元素的后代元素。后代选择器使用空格分隔元素。例如，要选择所有 <ul> 元素内部的 <li> 元素，使用 ul li 选择器：

ul li {
  /* 样式规则在这里 */
}

5.直接子元素选择器（Child Selector）：选择元素的直接子元素。直接子元素选择器使用 > 符号。例如，要选择< div> 元素的直接子元素 <p>，使用 div > p 选择器：

div > p {
  /* 样式规则在这里 */
}

6.通用选择器（Universal Selector）：选择页面上的所有元素。通用选择器使用 * 符号。例如，要选择页面上的所有元素，使用 * 选择器：

* {
  /* 样式规则在这里 */
}

7.伪类选择器（Pseudo-class Selector）：选择元素的特定状态或位置。伪类选择器以冒号 : 开头。例如，选择所有链接元素的悬停状态，使用 a:hover 选择器：

a:hover {
  /* 样式规则在这里 */
}

8.伪元素选择器（Pseudo-element Selector）：选择元素的特定部分，如首字母或最后一个行。伪元素选择器以双冒号 :: 开头。例如，选择段落的首字母，使用 p::first-letter 选择器：

p::first-letter {
  /* 样式规则在这里 */
}

这些是 CSS 的常用选择器，将这些选择器组合起来使用，或者是嵌套使用可以改变选择器的权重。

三、CSS 选择器的优先级

CSS 选择器的优先级决定了当多个规则应用于同一元素时，哪个规则的样式将被应用。优先级是由选择器的特定性（specificity）和源代码中的顺序（source order）共同决定的。以下是关于优先级的详细内容：

1.特定性（Specificity）：特定性是一个用于衡量选择器权重的值，它由四个部分组成：a、b、c 和 d，它们的值分别代表以下内容：

a：内联样式（在元素的 style 属性中定义的样式）的数量（权重值最高，值为1000）。

b：ID 选择器的数量（权重值为100）。

c：类选择器、属性选择器和伪类选择器的数量（权重值为10）。

d：元素选择器和伪元素选择器的数量（权重值为1）。

e: 通配符选择器（权重值为0）

上述选择器的优先级：a > b > c > d > e

p { /* a=0, b=0, c=1, d=1 */
  color: red;
}
#header { /* a=0, b=1, c=0, d=0 */
  background-color: blue;
}
.header { /* a=0, b=0, c=1, d=0 */
  font-size: 16px;
}

2.源代码顺序（Source Order）：如果多个规则的特定性相同，那么后面出现的规则将覆盖先前的规则。这意味着在样式表中后面定义的规则将具有更高的优先级。

p {
  color: red; /* 这个规则首先出现 */
}

p {
  color: blue; /* 这个规则后出现，将覆盖上一个规则 */
}

3.重要性（!important）：如果在规则中使用了 !important，它将覆盖特定性和源代码顺序，成为最高优先级。但是记得不可滥用 !important，因为它会增加代码的维护难度。

p {
  color: red !important; /* 具有最高优先级 */
}

3.继承性（Inheritance）：没有特定性或源代码顺序的概念，但需要注意的是某些样式属性具有继承性，例如字体属性，它们可以从父元素继承到子元素。

以上就是关于 CSS 选择器的内容了，希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。