根据多个类别选择元素


Answers:


595

你是说两节课?“束缚”选择器(它们之间没有空格):

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

这将选择与所有元素class1也有class2

在您的情况下:

li.left.ui-class-selector {

}

官方文档:CSS2类选择器


正如akamike指出的那样,Internet Explorer 6中的这种方法存在问题,您可能需要阅读以下内容:在IE6 CSS中使用双精度类?


6
请注意,IE6不喜欢这些,因为它不读取类链。它只会查看链中的最后一个类。
akamike 2010年

16
它不是:)所有主要网站都已删除,正在删除或计划在不久的将来放弃对IE6的支持。
Thomas Bonini 2010年

@Andreas Bonini:是的,我知道。老实说,我已经很长时间不关心IE6了。(我删除了以前的评论,因为我发现了另一个解决该问题的问题。)
Felix Kling 2010年

是的,您根本无法在IE6中使用它们,只能花更长的时间来设置元素的样式。例如,分别设置每个类的样式,并使用适当的CSS特定性尽可能地覆盖。
akamike 2010年

2
我深深地记得在IE6的坟墓上跳舞。今年,我什至不必支持IE10,并且即将完全放弃IE10。我爱未来。☺
迈克尔Scheper

22

链选择器不仅限于类,还可以对类和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*/
}

9
Id和Id是概念上很奇怪的选择器。
费利克斯·加侬-格尼尔

0

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

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";
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.