我有一个样式规则,当它有两种样式时我想应用于标签。有没有办法在没有JavaScript的情况下执行此操作?换一种说法:
<li class='left ui-class-selector'>
我只想在li
同时使用.left
和.ui-class-selector
类时应用我的样式规则。
你的意思是两个班级? “链”选择器(它们之间没有空格):
.class1.class2 {
/* style here */
}
这将选择class1
也具有class2
的所有元素。
在你的情况下:
li.left.ui-class-selector {
}
官方文件:CSS2 class selectors。
由于akamike在Internet Explorer 6中指出了此方法的问题,您可能需要阅读:Use double classes in IE6 CSS?
链选择器不仅限于类,您可以为类和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*/
}
您可以使用以下解决方案:
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";