我有一个样式规则,当一个标签有两个类时,我想应用它。有没有办法在没有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";
其他回答
你是说两门课?链接选择器(它们之间没有空格):
.class1.class2 {
/* style here */
}
这个函数选择了所有带有class1且具有class2的元素。
在你的情况下:
li.left.ui-class-selector {
}
官方文档:CSS2类选择器。
正如akamike指出的在IE6中这种方法的一个问题,你可能想读这个:在IE6 CSS中使用双类?
链式选择器不仅仅局限于类,你可以对类和id都这样做。
类
.classA.classB {
/*style here*/
}
类别和Id
.classA#idB {
/*style here*/
}
Id & Id
#idA#idB {
/*style here*/
}
当前所有好的浏览器都支持这个,除了ie6,它基于列表中的最后一个选择器进行选择。所以“.classA。classB"将基于".classB"进行选择。
为了你的案子
li.left.ui-class-selector {
/*style here*/
}
or
.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";