根据多个类别选择元素

CSS

Tom凯

2020-03-22

我有一个样式规则，当它具有两个类时，我想将其应用于标签。没有JavaScript，有什么方法可以执行此操作吗？换一种说法：

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

我想申请我的样式规则仅如果li有两个.left及.ui-class-selector类应用。

第2561篇《根据多个类别选择元素》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答

番长GreenL 2020.03.22

你是说两节课？“束缚”选择器（它们之间没有空格）：

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

这将选择与所有元素class1也有class2。

在您的情况下：

li.left.ui-class-selector {

}

官方文档：CSS2类选择器。

正如akamike指出的那样，Internet Explorer 6中此方法存在问题，您可能需要阅读以下内容：在IE6 CSS中使用双精度类？

西里神奇 2020.03.22

您可以使用以下解决方案：

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

古一 2020.03.22

链选择器不仅限于类，您也可以对类和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*/
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android