Question

让我们说这是我的HTML：

<div class="example">
  <span></span>
</div>

<div class="test">
  <span></span>
</div>

<div class="foo">
  <span></span>
</div>

<div class="blah">
  <span></span>
</div>

除了span中的span之外，我想为每个.foo设置样式。我不能使用:not，因为我想要在实际代码中忽略太多div s（父元素），比我试图定位的父元素更多。所以这就是我目前正在做的事情：

.example span, .test span, .blah span {

如果它只是一条规则，那就太好了，但事实并非如此;我的代码最终看起来像这样：

.example span, .test span, .blah span {
}

.example span:hover, .test span:hover, .blah span:hover {
}

.example span:before, .test span:before, .blah span:before,
.example span:after, .test span:after, .blah span:after {
}

这很快就会变得乏味。有什么更好的方法呢？

Answer 1

CSS很乏味。使用SASS或LESS编译CSS并避免一些麻烦。

在SCSS（SASS）中：

.example,
.test,
.blah {
  span {
    &:hover {

    }
    &:before,
    &:after {

    }
  }
}

了解更多信息： http://sass-lang.com和http://compass-style.org

Answer 2

你可以在div中添加额外的类并在声明中链接它们;所以假装你想在div.blah的span上添加.bold类，你会这样做： .blah.bold span{}如果不加以检查也很容易变得臃肿，但在你的情况下听起来很合适。

用普通子代写CSS类的更好方法

2 个答案: