css - 只选择具有两次相同类别的节点

Question

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

我希望如此

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

Answer 1

你只需要一个更具体的目标:)

.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