css - 如何在 CSS 选择器中添加多个 not？

Question

我有以下CSS：

#content-button-panel ul li a.folder span {
  cursor: default;
}
#content-button-panel ul li a:not(.folder) span {
  cursor: pointer;
}

和以下 HTML：

<a class="title-coffee"><span>Overview</span></a>

我怎样才能使 HTML（具有 title-xxxxxxx 类）具有默认光标？请注意，我需要它与 title-coffee 或任何以 title- 开头的类一起使用

score 2 · Accepted Answer

你为什么不像这样添加新的 CSS 类：

.cursor {
    cursor: default;
}
.pointer {
    cursor: pointer;
}

然后在需要的地方专门使用每个类，例如：

<a class="coffee cursor"><span>Overview</span></a>
<a class="folder pointer"><span>Pointer</span></a>

score 1 · Accepted Answer

您可以使用众多属性选择器之一。这个选择所有类属性以“title-”开头的元素

 a[class^="title-"]

在你的情况下，你会像这样使用它：

#content-button-panel ul li a.folder span,
#content-button-panel ul li a[class^="title-"] span {
  cursor: pointer;
}

score 0 · Accepted Answer

这就是我要做的。我宁愿在每个对象上使用 ID，并根据需要专门针对它们。如果您的目标是一个类，那么指定特定项目变得更加困难，这就是我推荐这种方法的原因。

CSS：

.defaultCursor {
   cursor: default;
}

HTML：

<a id="ThisItemsID" ><span>Overview</span></a>

JS 代码（根据需要在任何需要应用光标的地方）：

$("#ThisItemsID").addClass('defaultCursor');

score 0 · Accepted Answer

与 CSS 的否定可以通过~~2 种~~方式完成 1 种方式：

~~input:not(.classA, .classB) /* 就个人而言，我从未见过这个工作 */~~

或者

input:not([type="radio"]):not([type="checkbox"])

通常，我会建议简单地使用第三类而不是使用:not. 但是对于input某些元素在浏览器的默认样式下看起来更好的元素，编写一个包含选择器来捕获我想要设置样式的每一个类型比为我不想要的类型编写一个否定选择器要长得多，我会选择较短的选择器。

:not可以像任何其他简单的选择器或伪类一样链接

a[class^="title-"]:not(.folder)

4 回答 4