对大多技术人员来说都比较熟悉 CSS 选择器，这篇文章梳理了你必须要记住的一些 CSS 选择器，以及选择器的优先级，这将有助于你平时的工作。
选择器和优先级
CSS 选择器用于选择要样式化的 HTML 元素，可以根据元素的类型、类、ID、属性等进行选择。选择器的优先级基于不同选择器的特定性和权重。以下是一些常见的选择器：
- 类选择器：以点号（.）开头，选择具有相同类名的元素。
- ID 选择器：以井号（#）开头，选择具有特定ID的元素。
- 标签选择器：选择特定类型的元素。
- 后代选择器：选择元素的后代元素。
- 伪类选择器：选择元素的特定状态（例如
:hover）。
此外，还有很多复杂的 CSS3 和正则选择器，比如：first-child，class ^= “grid-”。使用时注意考虑浏览器兼容性。
我们列举 6 个 CSS 选择器的面试点及解析：
1.请解释后代选择器。
- 后代选择器允许您选择元素的后代元素。它由两个或多个选择器组成，其中第一个选择器匹配父元素，而第二个选择器匹配要选择的后代元素。
- 示例：
div p选择所有段落元素，但仅在它们是div元素的后代时。
2.请解释伪类选择器。
- 伪类选择器用于选择元素的特定状态。例如，
:hover选择器选择鼠标悬停在元素上时的状态。 - 示例：
a:hover选择所有悬停在链接上的元素。
3.请解释子元素选择器。
- 子元素选择器允许您选择作为另一个元素的直接子元素的元素。它由两个选择器组成，用
>符号分隔。 - 示例：
ul > li选择所有作为ul元素的直接子元素的li元素。
4.请解释相邻选择器
- 相邻选择器，它只会选中指定元素的直接后继元素。它由两个选择器组成，用
+符号分隔。 - 示例：
ul + p选中了所有ul元素后面的第一段p元素。
5.请列举 CSS 选择器的优先级顺序。
- CSS 选择器的优先级顺序为：内联样式 > ID 选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承样式。换句话说，内联样式最具优先级，而继承样式最不具优先级。
6.请解释如何计算选择器的优先级。
- 计算选择器优先级的方法是将选择器中每个类型的选择器分配一个特定的权重值，然后将这些权重值相加。 ID 选择器的权重值最高，为 100 ；类选择器和属性选择器的权重值为 10 ；标签选择器的权重值为 1 ；通用选择器和继承样式的权重值为 0。例如，选择器
#content .article h1的优先级为 100 + 10 + 1 = 111，而选择器body p的优先级为 1 。
📢 update 同步更新
掘金专栏 | 知乎专栏 | Github | 简书专栏 | CSDN | segmentfault
写在最后
💐💐💐梳理不易！！！💐💐💐看到这里你已经掌握了前端必备工作技能之一，很开心你学到了这些知识点，顺手给个赞和关注吧，你的鼓励是我不断分享的动力！😊😊😊
