WordPress插件CSS选择器问题：如何仅定位首个子元素div类？

问题分析 #

你需要仅选中.parent-item.my-target的直接子元素中第一个带.child-item类的元素，但原有选择器失效的原因如下：

• :first-child：要求目标是父元素的第一个子元素，但你的.child-item前有<style>和无类<div>，不满足条件。
• :first-of-type：选中父元素下同类型标签的第一个，这里第一个<div>没有.child-item类，因此无法匹配目标。
• :nth-child(1)：逻辑和:first-child一致，同样依赖目标是第一个子元素，因此无效。

可行解决方案 #

方案1：通用兄弟选择器结合:not()（兼容性好，推荐） #

这个选择器会匹配父元素下第一个出现的.child-item直接子元素，不受前面其他元素的数量/类型影响：

.parent-item.my-target > .child-item:not(.child-item ~ .child-item) {
    border: 5px blue solid;
}

原理：.child-item ~ .child-item会选中所有前面有其他.child-item的元素，加上:not()后就只会保留第一个出现的.child-item。

方案2：使用CSS :has()选择器（现代浏览器支持） #

如果你的目标环境支持现代CSS特性，可以用:has()来更直观地选中第一个目标元素：

.parent-item.my-target > .child-item:has(:not(.child-item) ~ &) {
    border: 5px blue solid;
}

若能确定目标.child-item是父元素下第二个<div>，也可以用简化写法：

.parent-item.my-target > .child-item:first-of-type {
    border: 5px blue solid;
}

注意：此方案依赖元素类型的位置排序，灵活性不如方案1。

方案3：固定位置选择器（不推荐） #

如果能确定.child-item是父元素的第三个子元素，可以直接指定位置，但这种写法在子元素顺序变化时会失效：

.parent-item.my-target > .child-item:nth-child(3) {
    border: 5px blue solid;
}

完整代码示例 #

<div class="parent-item my-target">
  <style></style>
  <div>darren div</div>
  <div class="child-item">
    Target
    <div class="parent-item">
        <div class="child-item">
          Hello
        </div>
    </div>
    <div class="parent-item">
        <div class="child-item">
          good bye
        </div>
    </div>
  </div>
</div>

.child-item {
    border: 1px red solid;
}

/* 使用推荐的方案1 */
.parent-item.my-target > .child-item:not(.child-item ~ .child-item) {
    border: 5px blue solid;
}

内容的提问来源于stack exchange，提问作者Will Honeywill