更好的方式来写CSS类与普通孩子

比方说，这是我的HTML：更好的方式来写CSS类与普通孩子

<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在.foo的span。我不能使用: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 { 
}

这很快乏味。什么是更好的方式来做到这一点？

来源

2013-03-03 UserIsCorrupt

类跨度。或者在'.foo'中对span进行分类，然后对'span：not（.foo-span）'进行分类。 – 2013-03-03 01:27:45

CSS很繁琐。使用SASS或LESS来编译您的CSS，并节省您的一些头痛。

在SCSS（SASS）：

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

    } 
    &:before, 
    &:after { 

    } 
    } 
}

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

来源

2013-03-03 01:31:43 tester

，你可以额外的类添加到您的div并在声明把它们连;所以假装你想在div.blah的跨度上添加.bold类，你应该这样做： .blah.bold span{}如果不检查，它也可能容易变得臃肿，但在你的情况下听起来像是一个不错的选择。

来源

2013-03-03 01:36:19 albert

更好的方式来写CSS类与普通孩子

回答

相关问题