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

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（标题类为-xxxxxxx）的游标具有默认值？注意我需要使用title-coffee或任何以title -

开头的类

Answer 1

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

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

然后你专门在需要的地方使用每个班级：

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

Answer 2

您可以使用众多attribute selectors中的一个。这个选择所有类属性以“title - ”

开头的元素

 a[class^="title-"]

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

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

Answer 3

这是我要做的。我宁愿在每个对象上使用ID，并根据需要专门定位它们。如果您要定位一个类，则会更难指定特定项目，这就是我推荐此方法的原因。

CSS：

.defaultCursor {
   cursor: default;
}

HTML：

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

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

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

Answer 4

CSS的否定可以 2种方式 1种方式：

输入：不是（.classA，.classB）/ *个人，我从未见过这项工作* /

或

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

通常，我建议只使用第3类而不是使用:not。但是对于input元素，其中一些元素使用浏览器的默认样式看起来更好，写出包含选择器以捕获我做想要样式的每一种类型比写出来要长得多对于我不想要的类型的否定选择器，我会选择较短的选择器。

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

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