Question

有没有更好的方法来编写以下内容？

.parent .child_1, .parent .child_2, .parent .child_N {}

案件是我可能只想影响选定的孩子，而不是所有孩子？

Answer 1

好吧，因为孩子们都可以有多个班级，我只会这样做

.parent .child { ... }

并编写html：

<div class="parent">
    <div class="child child_1"></div>
    <div class="child child_2"></div>
    <div class="child child_3"></div>
    ...
    <div class="child child_N"></div>
</div>

或者，您可以使用CSS预编译器语言编写代码，例如LESS（http://lesscss.org/），这样可以使这些事情变得更容易。

Answer 2

一个不改变你的html的简单解决方案，你可以使用css属性选择器。

.parent [class*=child] {}

前置选择器将应用于其类包含文本child的任何子元素。

所有现代浏览器都支持。（即7及以上）。查看This

Answer 3

使用CSS预处理器（如LESS），您可以使用嵌套：

.parent {
    .child_1, .child_2, .child_N {

    }
}

如果您只需要支持Firefox / WebKit浏览器，则可以使用:-moz-any()和:-webkit-any：

.parent :-moz-any(.child_1, .child_2, .child_N) {

}
.parent :-webkit-any(.child_1, .child_2, .child_N) {

}

另外：http://www.w3.org/TR/2011/WD-selectors4-20110929/#matches

Answer 4

.parent:nth-child(2n+1) {
  declarations
}

也许:)。

http://reference.sitepoint.com/css/understandingnthchildexpressions

在处理CSS中的选择孩子时，更好的方式来引用重复父母？

4 个答案: