css 选择包含具有特定属性值或类的div的div [重复]

bprjcwpo 于 2022-12-20 发布在其他

关注(0)|答案(2)|浏览(206)

- 此问题在此处已有答案**：

（33个答案）
4天前关闭。
我想选择一个div，其中包含另一个具有特定类或特定属性值的div。我已经尝试了以下方法：（但它选择子项而不是父项/容器）

div div[data-value="hi"]
div>div[data-value="hi"]
div div.any
div>div.any

（示例）具有属性值的对象：

<div>
<div data-value="hi">example</div>
</div>

（示例）或以下带有类的示例：

<div>
<div class="any">example</div>
</div>

请不要建议nth-child，因为它们将是一对div，并且div位置是随机的，如下例所示：

<div>
<div class="other">example</div>
</div>
<div>
<div class="any">example</div>
</div>
<div>
<div class="other">example</div>
</div>
<div>
<div class="other">example</div>
</div>

请让我知道，如果它甚至可能与只有CSS，谢谢你的帮助。

css

来源：https://stackoverflow.com/questions/74816080/select-a-div-that-contains-a-div-having-specific-attribute-value-or-class

2条答案

按热度按时间

blmhpbnm1#

如果我理解正确，并且您希望目标是PARENT，如果它包含一个具有给定类或属性的子对象，那么您需要：has伪选择器。注意，它并不是在所有浏览器/版本中都可用，但有很好的可用性，请参见：Can I Use :has selector

div {
  height: 50px;
  width: 100%;
   
}

div:has(div.other) {
  background: red;
}

div:has(div[data-value="hi"]) {
  background: orange;
}

<div>
<div class="other">example</div>
</div>
<div>
<div class="any">example</div>
</div>
<div>
<div class="other">example</div>
</div>
<div>
<div data-value="hi">example</div>
</div>

赞(0）回复(0）举报 2022-12-20

w51jfk4q2#

只需直接选择它的类或数据值

div > .any {
  background: red;
}

div > [data-value="other"] {
  background: blue;
}

<div>
<div data-value="other">example</div>
</div>
<div>
<div class="any">example</div>
</div>
<div>
<div class="other">example</div>
</div>
<div>
<div class="other">example</div>
</div>

赞(0）回复(0）举报 2022-12-20

我来回答

css 选择包含具有特定属性值或类的div的div [重复]

2条答案

相关问题

热门标签

最新问答