前端二向箔07-CSS选择器 - 详细整理CSS选择器的核心知识

前言

CSS选择器是CSS的主体内容，通过一些标识特征，选中DOM中的元素（伪元素选择器则不然，后文会提及）。上一篇文章初略地列举了选择器地类型和优先级，本文会详细整理选择器的相关核心知识。

一、选择器类型

更具三大优先级进行划分为特点的，有四种。

1. 结构特点划分

结构选择器（层次选择器）：用于选择具有特定层次结构的元素。

div p {
  color: red;
}

这段代码将为所有位于div元素内的p元素设置红色文本颜色。

p {
  color: red;
}

这段代码将为文档中的所有p元素设置红色文本颜色。

2. 属性特点划分

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

div[class="container"] {
  background-color: blue;
}

这段代码将为所有具有class属性值为“container”的div元素设置蓝色背景颜色。

[href] {
  color: blue;
}

这段代码将为所有具有href属性的元素设置蓝色文本颜色。

3. 状态特点划分

伪类选择器：用于选择处于特定状态的元素。

:hover {
  color: red;
}

这段代码将为所有在鼠标悬停时设置红色文本颜色。

:active {
  background-color: blue;
}

这段代码将为所有被激活的元素设置蓝色背景颜色。

4. 存在特点划分

伪元素选择器：用于选择不存在于文档中的元素，但可以通过CSS进行创建。

::before {
  content: "Before";
}

这段代码将在元素之前插入“Before”文本。

::after {
  content: ":";
}

这段代码将在元素之后插入“:”文本。

二、选择器优先级

当多个选择器应用于同一个元素时，浏览器需要确定哪一个选择器具有更高的优先级，并应用其样式。选择器的优先级由以下因素决定：

1. 特殊性

特殊性是指选择器匹配元素的精确度。特殊性越高的选择器优先级越高。特殊性的计算方法如下：

• 元素ID选择器：100
• 类选择器、属性选择器、伪类选择器：10
• 元素类型选择器、通配符选择器：1

如果两个选择器的特殊性相同，那么浏览器会根据它们在CSS代码中的顺序来确定优先级。后出现的选择器优先级更高。

2. 继承

如果一个元素继承了另一个元素的样式，那么继承的样式优先级低于原始样式。

3. 重要性

如果一个样式声明带有!important标记，那么它的优先级将高于所有其他样式声明。

三、复合选择器

复合选择器是通过将多个选择器组合在一起形成的。复合选择器可以使用以下组合方式：

• 空格：空格将两个选择器组合在一起，表示后一个选择器是前一个选择器的子元素。

div p {
  color: red;
}

这段代码将为所有位于div元素内的p元素设置红色文本颜色。

• ：>符号将两个选择器组合在一起，表示后一个选择器是前一个选择器的直接子元素。

div > p {
  color: red;
}

这段代码将为所有是div元素的直接子元素的p元素设置红色文本颜色。

• +：+符号将两个选择器组合在一起，表示后一个选择器紧跟在