Sass 中常用的一些特殊选择器

在 Sass 中，我们不仅仅可以使用普通的 CSS 选择器，还可以使用一些特殊的选择器来实现更加灵活和高效的样式编写。

1. 父元素选择器 &

Sass 中的 & 符号表示父元素选择器，它可以在嵌套的选择器中对父元素进行选择和操作。例如：

.btn {
  color: #fff;
  background-color: blue;
  
  &:hover {
    background-color: darkblue;
  }
}

上面的代码中，&:hover 表示 .btn:hover，它可以很方便地定义 .btn 的 hover 样式。

2. 兄弟选择器 ~

Sass 中的 ~ 表示兄弟选择器，它可以在同级元素中选择前面某个元素后的所有元素。例如：

-- -------------------- ---- -------
----- -
  - ------------------ -
    ------- --- ----- -----
  -

  - ---------------------- -
    ------------ -----
  -
-

上面的代码中，+ 表示相邻兄弟选择器，~ 表示后继兄弟选择器。第一条规则表示 label 后面紧跟的 input[type='text'] 元素作为样式的选择器，第二条规则表示 label 后面的所有 input[type='checkbox'] 元素作为样式的选择器。

3. 子元素选择器 >

Sass 中的 > 表示子元素选择器，它可以选择某个元素的直接子元素。例如：

ul > li {
  list-style: none;
}

上面的代码中，ul > li 表示选择 ul 下的所有直接子元素 li，它们的样式将会被设置成没有列表符号的样式。

4. 属性选择器 []

Sass 中的属性选择器使用起来非常灵活，它可以根据元素属性的值来选择元素。例如：

a[href^='http'] {
  color: blue;
}

input[type='text'][disabled] {
  color: #ccc;
}

上面的代码中，[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