【前端面经】CSS-CSS选择器和CSS选择器权重

简介

CSS (Cascading Style Sheets) 是用于设计网页的样式表语言，它可以通过选择器来定位网页中的元素并为其添加样式。选择器是CSS的核心概念之一，它可以选择文档中的特定元素。CSS选择器是一种基于模式匹配的机制，它通过将样式规则与文档中的元素进行匹配来为这些元素应用样式。本篇文章将探讨CSS选择器及其权重的相关知识。

CSS选择器

CSS选择器用于定位文档中的特定元素。常见的CSS选择器有以下几种：

元素选择器

元素选择器通过选择HTML标签名称来选择元素。例如，p选择器将选择所有的<p>标签。例如：

p {
  color: red;
}

在这个例子中，p是选择器，color: red是样式规则，它表示将<p>标签的文本颜色设置为红色。

类选择器

类选择器通过选择HTML元素的class属性来选择元素。例如，.example选择器将选择所有class属性为example的元素。例如：

.example {
  color: green;
}

在这个例子中，.example是选择器，color: green是样式规则，它表示将所有class属性为example的元素的文本颜色设置为绿色。

ID选择器

ID选择器通过选择HTML元素的id属性来选择元素。例如，#example选择器将选择id属性为example的元素。例如：

#example {
  color: blue;
}

在这个例子中，#example是选择器，color: blue是样式规则，它表示将id属性为example的元素的文本颜色设置为蓝色。

伪类选择器

伪类选择器用于选择某些特定状态的元素。例如，:hover选择器将选择当鼠标悬停在元素上时的状态。例如：

a:hover {
  color: purple;
}

在这个例子中，a:hover是选择器，color: purple是样式规则，它表示将链接元素在鼠标悬停时的文本颜色设置为紫色。

CSS选择器权重

当多个选择器应用于同一元素时，CSS选择器权重将决定哪个样式将被应用。选择器的权重可以通过以下方式计算：

元素选择器的权重为1

例如，p选择器的权重为1。

类选择器的权重为10

例如，.example选择器的权重为10。

ID选择器的权重为100

例如，#example选择器的权重为100。

行内样式权重为1000

行内样式是指在元素的style属性中定义的样式。

当应用于同一元素的多个选择器具有不同的权重时，权重更高的选择器的样式将覆盖权重较低的选择器的样式。但是，如果两个选择器的权重相等，则后面的选择器的样式将覆盖前面的选择器的样式。

例如，对于以下HTML代码：

<p class="example" id="example" style="color: purple;">This text is purple.</p>

应用于这个元素的选择器有三个：.example、#example和p。由于行内样式权重最高，因此文本颜色将为紫色，即使p选择器的权重为1，.example选择器的权重为10，#example选择器的权重为100。

总结

CSS选择器和CSS选择器权重是CSS的核心概念之一，了解它们的工作原理对于创建高效和精确的样式表非常重要。选择合适的选择器和正确地计算选择器权重都是成为一名优秀前端开发者的必备技能。如果您想要更深入地了解这些概念，可以参考CSS规范或相关的教程和书籍。