根据多个类选择元素

Question

我有一个样式规则，我希望它在两个样式时应用于标记。有没有办法在没有JavaScript的情况下执行此操作？换句话说：

<li class='left ui-class-selector'>

如果li同时应用.left和.ui-class-selector类，我想仅应用我的样式规则 。

Answer 1

你的意思是两个班级？ “链”选择器（它们之间没有空格）：

.class1.class2 {
    /* style here */
}

这会选择class1同时拥有class2的所有元素。

在你的情况下：

li.left.ui-class-selector {

}

官方文件：CSS2 class selectors。

---

由于 akamike 指出Internet Explorer 6中此方法存在问题，您可能需要阅读此内容：Use double classes in IE6 CSS?

Answer 2

链选择器不仅限于类，您可以为类和ID执行此操作。

<强>类

.classA.classB {
/*style here*/
}

Class＆amp; ID

.classA#idB {
/*style here*/
}

Id＆amp; ID

#idA#idB {
/*style here*/
}

除IE 6外，所有当前流行的浏览器都支持此功能，它根据列表中的最后一个选择器进行选择。所以“.classA.classB”将根据“.classB”进行选择。

对于你的情况

li.left.ui-class-selector {
/*style here*/
}

或

.left.ui-class-selector {
/*style here*/
}

Answer 3

您可以使用以下解决方案：

CSS规则适用于具有以下两个类别的所有标签：

.left.ui-class-selector {
    /*style here*/
}

CSS规则适用于具有以下两个类别的所有<li>标签：

li.left.ui-class-selector {
   /*style here*/
}

jQuery解决方案：

$("li.left.ui-class-selector").css("color", "red");

JavaScript解决方案：

document.querySelector("li.left.ui-class-selector").style.color = "red";