在CSS中，可以使用分组和嵌套来更有效地组织和管理样式规则，以提高代码的可读性和维护性。

1. CSS 选择器分组：

通过逗号将多个选择器组合在一起，可以为这些选择器应用相同的样式规则。例如：
h1, h2, h3 {
  color: #333;
  font-family: 'Arial', sans-serif;
}

在上面的例子中，h1、h2 和 h3 元素都会应用相同的颜色和字体。

2. CSS 规则嵌套：

CSS 规则可以嵌套在其他规则内，以创建更具层次结构的样式。这在编写复杂样式时特别有用。例如：
nav {
  background-color: #f3f3f3;
  padding: 10px;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        text-decoration: none;
        color: #333;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

上述代码示例中，nav 的样式包含了 ul 和 li 的样式，而 li 中的样式又包含了 a 的样式。这种嵌套结构可以使代码更有层次感，也更容易理解。

请注意，在使用嵌套时，不要过度嵌套，以免造成样式表的复杂性。适度的嵌套可以提高代码的可读性，但过多的嵌套可能导致选择器过于具体，不利于维护。


转载请注明出处：http://www.zyzy.cn/article/detail/4005/CSS