我有以下 HTML:
<div class="row">
<p> Text </p>
</div>
<div class="row">
<p> Text </p>
<p> Text </p>
</div>
我想对行中唯一的所有子元素应用不同的样式。我知道我可以为 para 执行以下操作:
.row p:only-child{
//apply your styles
}
我的问题很简单: 是否有任何简写方法将 ::only-child 样式应用于父行中的所有元素(例如其他 div s), 或者我必须无休止地将其标记为:
.row .class1:only-child{
//apply your styles
}
.row class2:only-child{
//apply your styles
}
最佳答案
这有两个不同的层次:
.row *:only-child
选择 .row 的所有 child ，这些 child 是唯一的 child ，其中 as
.row > *:only:child
选择 .row 的所有直接 子级是唯一的子级。请注意，您实际上并不需要 *，因为如果您只是使用 :only-child 选择器，它就会被暗示。这将使您的选择器看起来像 .row > :only-child。
所以，在下面的例子中:
<div class="row">
<p id="p1">Text goes here</p>
</div>
<div class="row">
<p id="p2"><span id="span1">Text</span></p>
<p id="p3">More text is here</p>
</div>
第一个选择器将选择 #p1 和 #span1，而第二个选择器将只选择 #p1
关于css - 如何在 CSS3 中使用 CSS 选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18360995/