CSS选择器，与给定选择器不匹配的匹配元素

Question

我正在尝试使用css匹配与给定选择器不匹配的元素。

考虑到下面的标记，我尝试只选择第一个".color“

<div uid="unique-id-1">
    <div>  <div class="color"></div> </div>
     <div uid="unique-id-2">
                 <div class="color"></div>
     </div>
</div>

我尝试了[uid="unique-id-1"] .color:not([uid="unique-id-1"] [uid] .color)，但它显然不起作用，但我认为它将有助于理解我正在寻找的东西。

提前感谢！

Answer 1

如果您只打算将选择器应用于这个有限的元素组合(即页面中没有任何其他.color可能受此影响)，那么

[uid="unique-id-1"] > div:not([uid]) > .color

如果您的应用程序允许，请考虑将该属性重命名为data-uid，以便更清楚地表明这是特定于应用程序的非标准uid属性。

Answer 2

这看起来很简单：

​

[uid="unique-id-1"]>:first-child .color {
  color: red;
}

<div uid="unique-id-1">
  <div>
    <div class="color">A</div>
  </div>
  <div uid="unique-id-2">
    <div class="color">B</div>
  </div>
</div>

​

也就是说，作为属性名的uid会使您的HTML无效，所以您应该将其重命名为data-uid

​

[data-uid="unique-id-1"]>:first-child .color {
  color: red;
}

<div data-uid="unique-id-1">
  <div>
    <div class="color">A</div>
  </div>
  <div data-uid="unique-id-2">
    <div class="color">B</div>
  </div>
</div>

​