SASS 选择器优先级详解

在前端开发中，选择器是样式表中不可或缺的一部分。特别是 SASS 带来的诸多便利，让我们可以更加灵活地编写样式。但是，了解选择器的优先级是很重要的，因为它决定了最终应用在 HTML 元素上的样式。

选择器优先级

SASS 的选择器优先级与 CSS 选择器的优先级类似，但有些微小的差别。下面是选择器优先级的具体规则：

1. ID 选择器优先级最高，计入选择器总值。
2. 类选择器和属性选择器的优先级一样，计入选择器总值。
3. 标签选择器或伪元素选择器的优先级最低，不计入选择器总值。

选择器优先级是一个四元组，由 A、B、C 和 D 四个数字组成，分别代表四种选择器。具体而言，四个数字由 A、B、C、D 表示，总值为 ABCD。如果同一种选择器多次出现，则其次数与权重相加。

下面是一些示例，可供参考：

派生选择器

使用 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 选择器优先级的理解是前端开发工作中的必备技能。通过了解选择器优先级，我们可以更好地控制样式，使网站更加美观和易于维护。在实际的前端开发项目中，要善于使用派生选择器和优化选择器，以便使样式更具有灵活性和重用性。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/645b38cd968c7c53b0d93886