html - 为具有属性且不是第一个子元素的第一个元素上色

Question

我正在尝试为第一个元素设置背景颜色:

1. 具有属性:data-attr=false

2. 这不是他 parent 的第一个 child 。

所以如果是第一个 child ，就不要给它上色。 如果它不是第一个子元素，则只为第一个具有 data-attr=false 的元素着色。

示例:

---

1)

<div id="mainContainer">
    <p class="paragraph" data-attr=true>The first paragraph.</p>
    <p class="paragraph" data-attr=false>The second paragraph.</p>
</div>

第二个应该是彩色的。

---

2)

<div id="mainContainer">
    <p class="paragraph" data-attr=false>The first paragraph.</p>
    <p class="paragraph" data-attr=false>The second paragraph.</p>
</div>

没有人应该被着色(因为具有 data-attr=false 的第一个元素是 div 的第一个子元素)。

---

不存在第一个元素为data-attr=false而第二个元素为data-attr=true的情况。

This is my fiddle

Answer 1

第一个匹配属性选择器的元素没有选择器。

但是，由于永远不会出现第一个元素为 data-attr=false 而第二个元素为 data-attr=true 的情况，假设您的容器只会永远包含两个 p 元素，匹配你想要的元素仍然相当简单:

p[data-attr=true] + p[data-attr=false] {
    background-color: red;
}

<div>
    <p class="paragraph" data-attr=true>The first paragraph.</p>
    <p class="paragraph" data-attr=false>The second paragraph.</p>
</div>

<div>
    <p class="paragraph" data-attr=false>The first paragraph.</p>
    <p class="paragraph" data-attr=false>The second paragraph.</p>
</div>