Question

如果没有添加任何类（或触摸HTML），是否有一种方法可以将div中的第一个元素作为目标，如果该div中有第二个元素？以下是我的HTML：

<div class="grid">
    <div class="content">I WANT TO APPLY CSS TO THIS</div>
    <div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
<div class="grid">
    <div class="content">Don't apply here</div>
</div>
<div class="grid">
    <div class="content">Don't apply here</div>
</div>
<div class="grid">
    <div class="content">I WANT TO APPLY CSS TO THIS</div>
    <div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>

有一些上下文可以获得更好的图片...如果它是.content中唯一的.content，我想将.grid置于中心位置。但如果有两个.content div，那么我希望它们彼此相邻浮动。

注意：

我已经知道我可以通过

定位第二个.content

.grid .content:nth-child(2) { ... }

Answer 1

.grid > .content:first-child:not(:only-child) {
    color: blue;
}

<div class="grid">
    <div class="content">I WANT TO APPLY CSS TO THIS</div>
    <div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
<div class="grid">
    <div class="content">Don't apply here</div>
</div>
<div class="grid">
    <div class="content">Don't apply here</div>
</div>
<div class="grid">
    <div class="content">I WANT TO APPLY CSS TO THIS</div>
    <div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>

:first-child:not(:only-child)将是您的选择。

仅当第一个元素有其他兄弟元素时才对其进行定位

1 个答案: