SASS 中不同的选择器配合使用

SASS 是一种 CSS 预处理器，它可以让我们更高效、更方便地编写 CSS 代码。在 SASS 中，选择器是我们编写 CSS 样式的关键之一。选择器用来指定要应用样式的 HTML 元素，而在 SASS 中有许多种不同的选择器，它们可以组合使用，以更灵活地控制样式。在这篇文章里，我们将介绍 SASS 中不同的选择器如何配合使用，以及它们的详细用法和示例。

基本选择器

首先，我们来介绍 SASS 中最基础的选择器，也是最常见的选择器之一：类选择器、ID 选择器和元素选择器。

类选择器

类选择器用来指定一个或多个 HTML 元素的样式。在 SASS 中，类选择器以点号开头，例如：

.article {
  font-size: 16px;
  color: #333;
}

上述代码定义了一个 .article 类选择器，它会应用在所有 class 属性值为 article 的 HTML 元素上。

ID 选择器

ID 选择器用来指定一个 HTML 元素的样式。在 SASS 中，ID 选择器以井号开头，例如：

#nav {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

上述代码定义了一个 #nav ID 选择器，它会应用在 id 属性值为 nav 的 HTML 元素上。需要注意的是，ID 选择器应该尽量少用，因为它们的优先级非常高，而且不能重复使用。

元素选择器

元素选择器用来指定 HTML 标签的样式。在 SASS 中，元素选择器就是标签名，例如：

a {
  color: #0366d6;
  text-decoration: none;
}

上述代码定义了一个 a 元素选择器，它会应用在所有 <a> 标签上。

组合选择器

除了基本选择器，SASS 中还包含了许多组合选择器，它们可以用来指定更复杂的选择规则，例如子代选择器、后代选择器和同级选择器。

子代选择器

子代选择器用来匹配某个元素的直接子元素。在 SASS 中，子代选择器以大于号（>）表示，例如：

nav > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

上述代码定义了一个 nav > ul 子代选择器，它会应用在所有 <ul> 标签中，但只有在它们是 nav 元素的直接子元素时才有效。

后代选择器

后代选择器用来匹配某个元素的所有子元素，不论它们是在哪个层级上。在 SASS 中，后代选择器以空格表示，例如：

nav a {
  color: #0366d6;
  text-decoration: none;
}

上述代码定义了一个 nav a 后代选择器，它会应用在所有 <a> 标签上，只要它们是 nav 元素的后代元素就有效。

同级选择器

同级选择器用来匹配某个元素的兄弟元素，也就是与它在同一层级的元素。在 SASS 中，同级选择器以加号（+）表示，例如：

h1 + p {
  margin-top: 0;
}

上述代码定义了一个 h1 + p 同级选择器，它会仅仅应用在紧接着 <h1> 标签之后的 <p> 标签上。

复合选择器

复合选择器是由多个基本选择器或组合选择器组合而成的选择器，它们用来指定更加复杂的选择规则。在 SASS 中，复合选择器由空格分隔，例如：

.article p {
  line-height: 1.5;
}

#nav ul li {
  float: left;
}

上述代码定义了复合选择器 .article p 和 #nav ul li，它们分别匹配了所有 <p> 标签和所有在 nav 中的 <ul> 的子元素中的 <li> 标签。

总结

SASS 中的选择器可以用来指定 HTML 元素的样式，它们非常灵活，可以组合使用，以便更好地控制样式。本文介绍了 SASS 中的基本选择器、组合选择器和复合选择器，它们的详细用法和示例。使用 SASS 中的选择器，可以让我们编写出更加高效、简洁的 CSS 样式，提高代码的可维护性和可读性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648430a848841e9894356bd2