Question

如果我有两个这样的元素

<div class="one two three"></div>
<div class="one"></div>

我想抓住只有"one"类名的div。

我知道我可以这样做：

div[class="one"]

因为如果我div.one它适用于两者，

有没有其他方法来获取只具有指定类名的元素？

编辑 - 目标是缩短选择器字符数

Answer 1

[class=one]是目前只选择CSS中单个类的最短方法。如果您担心这对其他开发人员来说似乎很奇怪，请确保在其旁边添加注释。

如果您了解其他课程，可以使用:not pseudo-class：

div {
  height: 100px;
  width: 100px;
  margin: 10px;
}
div.one {
  background: purple;
}
div.one:not(.two):not(.three) {
  background: red;
}

<div class="one two three"></div>
<div class="one"></div>

Answer 2

根据对所有 CSS Selectors 的评论，我认为这些是您的最佳选择：

div[class="one"]：div，其类属性值恰好等于“一”
div[class$="one"]：div，其类属性值完全，字符串为“one”

仅使用一个类值定位元素

2 个答案: