Question

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

具有以下属性：data-attr=false
这不是他父母的第一个孩子。

因此，如果它是第一个孩子，请不要给它上色。如果它不是第一个孩子，请仅为具有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元素，匹配您想要的元素仍然相当简单：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这不是一个新的答案，只是@BoltClock answer

的一个小修改版本

如果第一个子段落data-attr="false"，请使用data-attr="true"定位多个后续段落，请使用此 p[data-attr=true]:first-child ~ p[data-attr=false]

jsFiddle

＆＃13;

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

＆＃13;

<div>
  <p class="paragraph" data-attr=true>The first paragraph. True.</p>
  <p class="paragraph" data-attr=false>The second paragraph. False.</p>
  <p class="paragraph" data-attr=false>The third paragraph. False.</p>
</div>
<hr>
<div>
  <p class="paragraph" data-attr=true>The first paragraph. True.</p>
  <p class="paragraph" data-attr=true>The second paragraph. True.</p>
  <p class="paragraph" data-attr=false>The third paragraph. False.</p>
</div>
<hr>
<div>
  <p class="paragraph" data-attr=false>The first paragraph. False.</p>
  <p class="paragraph" data-attr=true>The second paragraph. True.</p>
  <p class="paragraph" data-attr=false>The third paragraph. False.</p>
</div>
<hr>
<div>
  <p class="paragraph" data-attr=true>The first paragraph. True.</p>
  <p class="paragraph" data-attr=false>The second paragraph. False.</p>
  <p class="paragraph" data-attr=true>The third paragraph. True.</p>
  <p class="paragraph" data-attr=false>The forth paragraph. False.</p>
</div>
<hr>
<div>
  <p class="paragraph" data-attr=false>The first paragraph. False.</p>
  <p class="paragraph" data-attr=false>The second paragraph. False.</p>
  <p class="paragraph" data-attr=false>The third paragraph. False.</p>
</div>

＆＃13;

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

2 个答案: