SASS 是一种 CSS 预处理器，它可以让我们更高效、更方便地编写 CSS 代码。在 SASS 中，选择器是我们编写 CSS 样式的关键之一。选择器用来指定要应用样式的 HTML 元素，而在 SASS 中有许多种不同的选择器，它们可以组合使用，以更灵活地控制样式。在这篇文章里，我们将介绍 SASS 中不同的选择器如何配合使用，以及它们的详细用法和示例。
基本选择器
首先，我们来介绍 SASS 中最基础的选择器，也是最常见的选择器之一：类选择器、ID 选择器和元素选择器。
类选择器
类选择器用来指定一个或多个 HTML 元素的样式。在 SASS 中，类选择器以点号开头，例如：
-------- - ---------- ----- ------ ----- -
上述代码定义了一个 .article 类选择器，它会应用在所有 class 属性值为 article 的 HTML 元素上。
ID 选择器
ID 选择器用来指定一个 HTML 元素的样式。在 SASS 中，ID 选择器以井号开头，例如：
---- - ----------------- -------- -------------- --- ----- ----- -
上述代码定义了一个 #nav ID 选择器，它会应用在 id 属性值为 nav 的 HTML 元素上。需要注意的是，ID 选择器应该尽量少用，因为它们的优先级非常高，而且不能重复使用。
元素选择器
元素选择器用来指定 HTML 标签的样式。在 SASS 中，元素选择器就是标签名，例如：
- - ------ -------- ---------------- ----- -
上述代码定义了一个 a 元素选择器，它会应用在所有 <a> 标签上。
组合选择器
除了基本选择器，SASS 中还包含了许多组合选择器，它们可以用来指定更复杂的选择规则，例如子代选择器、后代选择器和同级选择器。
子代选择器
子代选择器用来匹配某个元素的直接子元素。在 SASS 中，子代选择器以大于号（>）表示，例如：
--- - -- - ------- -- -------- -- ----------- ----- -
上述代码定义了一个 nav > ul 子代选择器，它会应用在所有 <ul> 标签中，但只有在它们是 nav 元素的直接子元素时才有效。
后代选择器
后代选择器用来匹配某个元素的所有子元素，不论它们是在哪个层级上。在 SASS 中，后代选择器以空格表示，例如：
--- - - ------ -------- ---------------- ----- -
上述代码定义了一个 nav a 后代选择器，它会应用在所有 <a> 标签上，只要它们是 nav 元素的后代元素就有效。
同级选择器
同级选择器用来匹配某个元素的兄弟元素，也就是与它在同一层级的元素。在 SASS 中，同级选择器以加号（+）表示，例如：
-- - - - ----------- -- -
上述代码定义了一个 h1 + p 同级选择器，它会仅仅应用在紧接着 <h1> 标签之后的 <p> 标签上。
复合选择器
复合选择器是由多个基本选择器或组合选择器组合而成的选择器，它们用来指定更加复杂的选择规则。在 SASS 中，复合选择器由空格分隔，例如：
-------- - - ------------ ---- - ---- -- -- - ------ ----- -
上述代码定义了复合选择器 .article p 和 #nav ul li，它们分别匹配了所有 <p> 标签和所有在 nav 中的 <ul> 的子元素中的 <li> 标签。
总结
SASS 中的选择器可以用来指定 HTML 元素的样式，它们非常灵活，可以组合使用，以便更好地控制样式。本文介绍了 SASS 中的基本选择器、组合选择器和复合选择器，它们的详细用法和示例。使用 SASS 中的选择器，可以让我们编写出更加高效、简洁的 CSS 样式，提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648430a848841e9894356bd2