类内特定元素样式设置：能否将多组.site-eval相关CSS样式合并为单个声明？

算力阿峰

2026-4-30

能不能把多个.site-eval相关选择器合并成单个声明？

当然可以！现在CSS原生支持嵌套语法，完美解决你这个问题——能把所有和.site-eval相关的子元素样式都收拢到同一个父声明块里，不用重复写.site-eval前缀，代码更整洁也更易维护。

原来的代码

.site-eval { margin-left: 100px; margin-right: 100px; font-size: 1.2em; }
.site-eval a { color:rgb(155, 85, 0); }
.site-eval a:hover { text-decoration:underline; }
.site-eval li { padding-bottom: 10px; }

用CSS嵌套改写后的代码

.site-eval {
  margin-left: 100px;
  margin-right: 100px;
  font-size: 1.2em;

  /* 嵌套子元素a的样式 */
  & a {
    color: rgb(155, 85, 0);

    /* 继续嵌套a的hover状态 */
    &:hover {
      text-decoration: underline;
    }
  }

  /* 嵌套li的样式 */
  & li {
    padding-bottom: 10px;
  }
}

这里的&是CSS嵌套里的父选择器占位符，它会自动替换成外层的.site-eval，和你原来写的.site-eval a效果完全一致。