2

假设这是我的 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除spanin之外的所有样式.foo。我不能使用:not，因为在我的实际代码中我想忽略的 s （父元素）太多了div，比我试图定位的父元素还要多。所以这就是我目前正在做的事情：

.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 {
}

这很快就会变得乏味。有什么更好的方法来做到这一点？

4

2 回答 2

2

CSS 很乏味。使用 SASS 或 LESS 来编译你的 CSS 并省去一些麻烦。

在 SCSS (SASS) 中：

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

    }
    &:before,
    &:after {

    }
  }
}

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

于 2013-03-03T01:31:43.333 回答
1

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

于 2013-03-03T01:36:19.497 回答