将两个或多个CSS选择器与布尔条件组合_Css_Css Selectors

将两个或多个CSS选择器与布尔条件组合

css

将两个或多个CSS选择器与布尔条件组合,css,css-selectors,Css,Css Selectors,是否有一种方法可以使用布尔条件组合两个或多个CSS选择器-和，或，而不是考虑一下这个：由于活动太多，您已注销。例如，我可以只选择包含这两个类的元素吗类似于div.message和&div.error？尝试div.message.error这些应该可以工作： && = div.message.error {} || = div.message, div.error {} 别以为你能做到“不” 编辑：刚刚做了一个快速测试来确认： <html> <

是否有一种方法可以使用布尔条件组合两个或多个CSS选择器-

和

，

或

，

而不是

考虑一下这个

：


由于活动太多，您已注销。

例如，我可以只选择包含这两个类的元素吗

类似于

div.message和&div.error

？

尝试

div.message.error

这些应该可以工作：

&& = div.message.error {}
|| = div.message, div.error {}

别以为你能做到“不”

编辑：刚刚做了一个快速测试来确认：

<html>
    <head>
        <style type="text/css">
            div.error.message {
                background-color: red;
            }
            div.message, div.error {
                border: 1px solid green;
            }
        </style>
    </head>
    <body>
        <div>None</div>
        <div class="error">Error</div>
        <div class="message">Message</div>
        <div class="error message">Error Message</div>
    </body>
</html>


div.error.message{
背景色：红色；
}
div.message，div.error{
边框：1px纯绿色；
}
没有一个
错误
消息
错误消息

“message”、“error”和“error message”div都有一个绿色边框，只有“error message”div有一个红色背景。

这是一篇非常古老的文章，但我偶然发现了它，并认为我应该使用当前的CSS

：not（）

选择器来添加它：

选择两个类

.message.error {}

.message, .error {}

div:not(.message):not(.error) {}

选择任一类别

.message.error {}

.message, .error {}

div:not(.message):not(.error) {}

两个类别都不选择

.message.error {}

.message, .error {}

div:not(.message):not(.error) {}

。消息{
边框：1px实心；
}
.错误{
颜色：红色；
}
消息
.错误{
边缘底部：12px；
填充：12px；
}
.message.error{
背景:#ffv；
}
div:not（.message）：not（.error）{
字体：标准20px“漫画无MS”，草书，无衬线；
}


只有。留言
仅此而已。错误
两类
两类

您想在哪里进行选择？在Javascript（使用库？）或样式表或其他语言中？这些选择器将放在样式表中。问题已经得到正确回答，但请注意，双类选择器在我们亲爱的朋友IE6中不起作用。我正在开发一个新的应用程序，所以也许我应该弄清楚到底有多少我的用户是IE6，以决定这是否值得支持。仅仅拥有IE6支持就是一场维护噩梦。修复IE6特定bug所花费的时间可以用来为应用程序添加令人敬畏的改进。。。。我相信这就是“和”的情况。对于“或”，你可以简单地在每节课上重复这一行<代码>不不是一个大问题，只有

和和或是。。哇，我们这里有一个绕口令：）。。非常感谢您提供的详细示例。非常好的解决方案。只是好奇，解决方案是否在CSS规范等任何地方正式记录。？有参考价值。