我有一个样式规则,当它具有两个类时,我想将其应用于标签。没有JavaScript,有什么方法可以执行此操作吗?换一种说法:
<li class='left ui-class-selector'>
我想申请我的样式规则仅如果li
有两个.left
及.ui-class-selector
类应用。
我有一个样式规则,当它具有两个类时,我想将其应用于标签。没有JavaScript,有什么方法可以执行此操作吗?换一种说法:
<li class='left ui-class-selector'>
我想申请我的样式规则仅如果li
有两个.left
及.ui-class-selector
类应用。
您可以使用以下解决方案:
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";
链选择器不仅限于类,您也可以对类和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*/
}
你是说两节课?“束缚”选择器(它们之间没有空格):
这将选择与所有元素
class1
也有class2
。在您的情况下:
官方文档:CSS2类选择器。
正如akamike指出的那样,Internet Explorer 6中此方法存在问题,您可能需要阅读以下内容:在IE6 CSS中使用双精度类?