0

我有以下 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样式应用于父行中的所有元素（例如 other divs），或者我是否必须无休止地将其标记为：

.row .class1:only-child{

//apply your styles 

}

.row class2:only-child{

//apply your styles 

}
4

2 回答 2

4

这有两个不同的层次：

.row *:only-child

选择.row唯一的孩子的所有孩子，其中

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

第一个选择器将选择#p1and #span1，而第二个选择器将只选择#p1

于 2013-08-21T15:05:30.553 回答
1

你可以做

.row .class1:only-child, .row.class2:only-child{
    //apply your styles
}
于 2013-08-21T15:05:50.710 回答