CSS3 中新增了许多强大的选择器，如伪类选择器、属性选择器、结构伪类选择器等等。这些选择器可以让我们更加轻松地选中指定的元素，从而实现更加复杂的样式效果。在 SASS 中，我们也可以很方便地使用这些选择器，本文就来介绍如何在 SASS 中使用 CSS3 的选择器。
1. 伪类选择器
伪类选择器可以选择一些特殊状态的元素，如 :hover、:active、:focus 等。在 SASS 中，我们可以使用 & 符号来表示当前元素的状态，例如：
- -
------ -----
------- -
------ -----
-
-上面的代码表示当鼠标悬停在链接上时，链接的颜色会变成红色。
2. 属性选择器
属性选择器可以根据元素的属性来选择元素，如 [attr=value]、[attr^=value]、[attr$=value]、[attr*=value] 等。在 SASS 中，我们可以使用 [] 符号来表示属性选择器，例如：
------------------ - ------- --- ----- ----- -
上面的代码表示选择所有 type 属性为 text 的 input 元素，并设置边框为灰色。
3. 结构伪类选择器
结构伪类选择器可以根据元素在文档中的位置来选择元素，如 :first-child、:last-child、:nth-child(n) 等。在 SASS 中，我们可以使用 : 符号来表示结构伪类选择器，例如：
-------------- - ------------ ----- -
上面的代码表示选择第一个 li 元素，并将其字体加粗。
4. 示例代码
下面是一个使用 SASS 和 CSS3 选择器实现一个导航菜单的示例代码：
--- ------------ ------ -------------------- ------ ---------------------- ------ ---------------------- ------ ---------------------- -----
---- -
----------- -----
------- --
-------- --
-- -
------ -----
------------- -----
------------ -
------------- --
-
- -
-------- ------
-------- ----
------ -----
---------------- -----
------- -
----------------- -----
------ -----
-
-
-
-上面的代码实现了一个水平排列的导航菜单，当鼠标悬停在菜单项上时，菜单项的背景颜色会变成红色，文字颜色会变成白色。
5. 总结
本文介绍了如何在 SASS 中使用 CSS3 的选择器，包括伪类选择器、属性选择器、结构伪类选择器等。通过使用 SASS 和 CSS3 选择器，我们可以更加方便地实现复杂的样式效果，提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6575509bd2f5e1655de79509