在 Sass 中，我们不仅仅可以使用普通的 CSS 选择器，还可以使用一些特殊的选择器来实现更加灵活和高效的样式编写。
1. 父元素选择器 &
Sass 中的 & 符号表示父元素选择器，它可以在嵌套的选择器中对父元素进行选择和操作。例如：
---- -
------ -----
----------------- -----
------- -
----------------- ---------
-
-上面的代码中，&:hover 表示 .btn:hover，它可以很方便地定义 .btn 的 hover 样式。
2. 兄弟选择器 ~
Sass 中的 ~ 表示兄弟选择器，它可以在同级元素中选择前面某个元素后的所有元素。例如：
----- -
- ------------------ -
------- --- ----- -----
-
- ---------------------- -
------------ -----
-
-上面的代码中，+ 表示相邻兄弟选择器，~ 表示后继兄弟选择器。第一条规则表示 label 后面紧跟的 input[type='text'] 元素作为样式的选择器，第二条规则表示 label 后面的所有 input[type='checkbox'] 元素作为样式的选择器。
3. 子元素选择器 >
Sass 中的 > 表示子元素选择器，它可以选择某个元素的直接子元素。例如：
-- - -- - ----------- ----- -
上面的代码中，ul > li 表示选择 ul 下的所有直接子元素 li，它们的样式将会被设置成没有列表符号的样式。
4. 属性选择器 []
Sass 中的属性选择器使用起来非常灵活，它可以根据元素属性的值来选择元素。例如：
--------------- - ------ ----- - ---------------------------- - ------ ----- -
上面的代码中，[href^='http'] 表示选择 href 属性以 http 开头的 a 元素，[type='text'][disabled] 表示选择 type 属性值为 text，且 disabled 属性存在的 input 元素。
5. 占位符选择器 %
在 Sass 中，我们还可以使用占位符选择器 % 来定义一些共用的样式，然后在定义样式时再用 @extend 继承这些样式。例如：
--------- -
------- -
-------- ---
-------- ------
------ -----
-
-
---------- -
------- ----------
------ -------
------- - -----
-上面的代码中，%clearfix 表示定义一个占位符选择器，@extend 表示继承 %clearfix 的样式，这样 .container 元素也会自动继承 :after { content: ""; display: block; clear: both; } 的样式。
总结
以上就是 Sass 中常用的一些特殊选择器了。它们的使用可以让我们更加灵活和高效地定义样式，同时也能提高代码的可维护性。学习 Sass 特殊选择器的使用方法是很有必要的，在实际开发中能够更好地利用 Sass 这个工具来提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647808a1968c7c53b044e0c2