在前端开发中，选择器是样式表中不可或缺的一部分。特别是 SASS 带来的诸多便利，让我们可以更加灵活地编写样式。但是，了解选择器的优先级是很重要的，因为它决定了最终应用在 HTML 元素上的样式。
选择器优先级
SASS 的选择器优先级与 CSS 选择器的优先级类似，但有些微小的差别。下面是选择器优先级的具体规则：
- ID 选择器优先级最高，计入选择器总值。
- 类选择器和属性选择器的优先级一样，计入选择器总值。
- 标签选择器或伪元素选择器的优先级最低，不计入选择器总值。
选择器优先级是一个四元组，由 A、B、C 和 D 四个数字组成，分别代表四种选择器。具体而言，四个数字由 A、B、C、D 表示，总值为 ABCD。如果同一种选择器多次出现，则其次数与权重相加。
下面是一些示例，可供参考：
| 选择器举例 | 选择器优先级 |
|---|---|
| #content | 1,0,0,0 |
| #content\ p | 2,0,0,0 |
| .content | 0,1,0,0 |
| div.content | 0,1,1,0 |
| #content\ div | 1,0,1,0 |
派生选择器
使用 SASS 可以编写更复杂的选择器，如继承和后代选择器。这些选择器称为派生选择器。下面是一些派生选择器示例：
-- -------------------- ---- -------
--- -
------ ----
- -
------ -----
-
----- -
------ ------
-
-上面的代码中，a 选择器是 div 选择器的后代选择器，表示 div 中包含的所有链接。new 类是与 div 关联的类，表示具有该类的 div。& 符号的作用是让选择器与其父元素连接起来，以减少复杂度。
选择器的具体案例
接下来，我们将通过具体的案例来说明选择器优先级的具体应用。首先是 HTML 代码：
<div class="container">
<div class="content">
<p class="text">#123456789</p>
</div>
</div>然后是 SASS 样式表：
-- -------------------- ---- -------
---------- -
-------- -
----- -
---------- -----
-
-
-
----- -
---------- -----
------ ----
----------- -
------------ -----
-
-接下来，我们将评估选择器的优先级。
-- -------------------- ---- -------
---------- -------- ----- -
-- ------ ----------- ----
-
----- -
---------- -----
------ ----
----------- -
------------ -----
-
-- ------ ----------- ---
-总值为 3010 的选择器具有更高的优先级，则应用它。
如果我们想为元素添加粗体文本样式，可以将其 class 设置为 text-bold，同时在 SASS 样式表中添加以下代码：
.container .content .text.text-bold {
font-weight: bold;
}这样，具有 class 为 text 和 text-bold 的元素将获得更高的权重。
总结
SASS 选择器优先级的理解是前端开发工作中的必备技能。通过了解选择器优先级，我们可以更好地控制样式，使网站更加美观和易于维护。在实际的前端开发项目中，要善于使用派生选择器和优化选择器，以便使样式更具有灵活性和重用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b38cd968c7c53b0d93886