着色具有属性的第一个元素,它不是第一个孩子

Question

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

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

2. 这不是他父母的第一个孩子.

因此,如果它是第一个孩子,请不要给它上色.如果它不是第一个孩子,则只为第一个元素着色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.

这是我的小提琴

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>