SASS 是一种 CSS 预处理器，可以让我们以更加方便和高效的方式来编写 CSS。在 SASS 中，选择器及伪类的使用及区别也有一些特殊的地方。本篇文章将为你详细介绍这些内容，并给出一些实用的示例代码。
选择器及伪类
在 SASS 中，选择器和伪类使用与 CSS 相同的语法，但可以使用嵌套来更加方便地表示选择器之间的层级关系。例如，我们可以这样定义一个包含多层嵌套的选择器：
-- -------------------- ---- -------
------- -
-- -
---------- ----
-
- -
---------- ------
- -
---------------- -----
-
-
-在这个例子中，#header 包含两个嵌套的子元素选择器 h1 和 p。同时，在 p 选择器的嵌套中，还包含了一个 a 子元素选择器。
除了基本的选择器，SASS 还提供了一些强大的伪类选择器。下面我们来了解一下一些常用的伪类选择器及其使用。
:hover
:hover 伪类选择器可以在鼠标悬停在一个元素上时触发样式。例如，我们可以这样定义一个鼠标移动到图像时，显示一个半透明的遮罩层的样式：
-- -------------------- ---- -------
------ -
--------- ---------
--------------- -
-------- ---
--------- ---------
---- --
----- --
------ -----
------- -----
----------------- ------- -- -- -----
-
-在这个例子中，我们在 .image 的 :hover 伪类选择器中定义了一个 ::before 伪元素。这个伪元素是一个绝对定位的半透明层，会在鼠标悬停时显示在图像上方。
:nth-child
:nth-child 伪类选择器可以选择一个元素的第几个子元素。例如，我们可以这样选择一个列表中的偶数行，并将其背景颜色设置为灰色：
li:nth-child(even) {
background-color: lightgrey;
}在这个例子中，我们使用 :nth-child(even) 选择器选择了列表中的偶数行，然后将它们的背景颜色设置为灰色。
:not
:not 伪类选择器可以选择不匹配一个选择器的元素。例如，我们可以这样选择列表中除了第一个和最后一个元素外的其他元素，并将其颜色设置为蓝色：
li:not(:first-child):not(:last-child) {
color: blue;
}在这个例子中，我们使用 :not 伪类选择器选择了列表中除了第一个和最后一个元素外的其他元素，然后将它们的颜色设置为蓝色。
选择器及伪类的区别
在 SASS 中，选择器和伪类选择器之间还有一些特殊的区别。在选择器中，我们可以使用父选择器来引用上层选择器的值。例如，我们可以这样定义一组带有不同背景颜色的按钮：
-- -------------------- ---- -------
------- -
----------------- ---------
------- -
----------------- -----
-
--------- -
----------------- -----
------- -
----------------- ----------
-
-
--------- -
----------------- ------
------- -
----------------- -----------
-
-
--------- -
----------------- -------
------- -
----------------- ------------
-
-
-------- -
----------------- ----
------- -
----------------- ---------
-
-
-在这个例子中，我们使用了 & 引用了上层 .button 选择器，并在其后添加了 -primary、-success、-warning 和 -danger 四个子选择器。这种方式可以让我们更加方便地定义变量，从而减少样式表的冗余。
总结
通过本文的介绍，我们已经可以更好地了解 SASS 中选择器及伪类的使用及区别。希望本文能够给你带来一些新的思路和灵感。如果你还没有尝试过使用 SASS 编写样式表，建议你尝试一下，相信你会爱不释手的！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d090448841e98949bf152