【发布时间】：2011-02-03 00:48:07
【问题描述】：
当标签有 两个 类时，我想将其应用于标签的样式规则。有没有什么方法可以在没有 JavaScript 的情况下执行此操作？换句话说：
<li class="left ui-class-selector">
我想应用我的样式规则只有如果li同时应用了.left和.ui-class-selector类。
【问题讨论】：
标签： css css-selectors
【发布时间】：2011-02-03 00:48:07
【问题描述】：
你的意思是两个班？ “链接”选择器（它们之间没有空格）：
.class1.class2 {
/* style here */
}
这将选择所有具有class1 且也具有class2 的元素。
在你的情况下：
li.left.ui-class-selector {
}
官方文档：CSS2 class selectors.
akamike 指出 Internet Explorer 6 中此方法存在问题，您可能需要阅读以下内容：Use double classes in IE6 CSS?
【讨论】：
-
请注意，IE6 不喜欢这些，因为它不读取类链。它只会查看链中的最后一个类。
-
不是 :) 所有主要网站都已放弃、正在放弃或计划在不久的将来放弃对 IE6 的支持。做同样的事情！
-
@Andreas Bonini：是的，我知道。老实说我已经很长时间不关心IE6了。 （我删除了我之前的评论，因为我发现了另一个处理这个问题的问题。）
-
是的，你不能在 IE6 中使用它们，只需要更长的路径来设置你的元素样式。例如，分别设置每个类的样式，并使用适当的 CSS 特性来尽可能地覆盖。
-
我深情地记得在 IE6 的坟墓上跳舞。今年我什至不必支持 IE10，完全放弃 IE 即将到来。我爱未来。 ☺
链选择器不仅限于类，您可以对类和 id 都这样做。
类
.classA.classB {
/*style here*/
}
类和 ID
.classA#idB {
/*style here*/
}
身份证和身份证
#idA#idB {
/*style here*/
}
目前所有好的浏览器都支持这个，除了 IE 6，它根据列表中的最后一个选择器进行选择。因此“.classA.classB”将仅基于“.classB”进行选择。
根据你的情况
li.left.ui-class-selector {
/*style here*/
}
或
.left.ui-class-selector {
/*style here*/
}
【讨论】：
-
Id & Id 是一个概念上奇怪的选择器。
-
我认为双 ID 选择器是不可能的，因为它表示同一个元素需要有两个不同的 ID。
您可以使用以下解决方案：
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";
【讨论】：