仅选择具有相同类别两次的节点

时间:2019-04-26 12:17:45

标签: css css-selectors

我正在寻找一种方法来选择我不拥有的网页上具有两次相同类的元素,因此我无权修改其标记。

我希望

.abc.abc{background:blue}

仅会影响类别为abc abc的div,但实际上也会影响具有单个abc类别的div。

div[class*=abc abc]{background:blue}有相同的问题。

.abc{
  width:100px;
  height:100px;
  background:green;
  margin:5px;
}

.abc.abc{
  background:blue;
}
<div class='abc'></div>
<div class='abc'></div>
<div class='abc abc'></div>

是否有选择器,所以我可以将规则应用于类为abc abc的div而不影响单个类为abc的div?

2 个答案:

答案 0 :(得分:2)

您只需要一个更具体的目标即可:)

.abc{
  width: 100px;
  height: 100px;
  background: green;
  margin: 5px;
}

div[class*="abc abc"] {
  background: blue;
}
<div class='abc'></div>
<div class='abc'></div>
<div class='abc abc'></div>

View CodePen Solution

答案 1 :(得分:-1)

作为解决方案,请尝试: 但这适用于特定班级(第三个)

.abc:nth-child(3){ background:blue; }