根据多个类选择元素

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类选择器.

由于akamike在Internet Explorer 6中指出了此方法的问题,您可能需要阅读:在IE6 CSS中使用双类？

Answer 2

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

类

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

班级号

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

Id&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";