我有一个样式规则,当一个标签有两个类时,我想应用它。有没有办法在没有JavaScript的情况下执行这个任务?换句话说:

<li class="left ui-class-selector">

我只想在li同时应用.left和.ui-class-selector类时应用我的样式规则。


当前回答

你是说两门课?链接选择器(它们之间没有空格):

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

这个函数选择了所有带有class1且具有class2的元素。

在你的情况下:

li.left.ui-class-selector {

}

官方文档:CSS2类选择器。


正如akamike指出的在IE6中这种方法的一个问题,你可能想读这个:在IE6 CSS中使用双类?

其他回答

你是说两门课?链接选择器(它们之间没有空格):

.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";