将两个或多个 CSS 选择器与布尔条件相结合答案

【问题标题】：Combining two or more CSS selectors with a boolean condition将两个或多个 CSS 选择器与布尔条件相结合
【发布时间】：2019-07-25 00:20:32
【问题描述】：

有没有办法使用布尔条件组合两个或多个 CSS 选择器 - and、or、not？

考虑一下<div>：

<div class="message error">
    You have being logged out due too much activity.
</div>

我可以只选择那些同时包含这两个类的元素吗？

类似于div.message && div.error？

【问题讨论】：

您想在哪里进行选择？使用 Javascript（使用 lib？）还是使用样式表或其他语言？
这些选择器将放在样式表中。
问题已经得到了正确的回答，但是请注意，双类选择器在我们亲爱的IE6中不起作用。
我正在开发一个新的应用程序，所以也许我应该弄清楚我的用户中有多少是 IE6 来决定是否值得支持。仅仅拥有 IE6 支持就是一场维护噩梦。花在修复 IE6 特定错误上的时间可以用于为应用程序添加令人敬畏的改进。

标签： css css-selectors

【解决方案1】：

这些应该可以工作：

&& = 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 都有绿色边框，只有“错误消息” div 有红色背景。

【讨论】：

完美.. not 不是一个大问题，只有and 和or 是.. 哇，我们这里有一个绕口令:) .. 非常感谢详细的例子。
很好的解决方案。只是好奇，解决方案是否正式记录在 CSS 规范等的任何地方？有用的参考。

【解决方案2】：

试试div.message.error。

【讨论】：

...我相信是“和”的情况。对于“或”，您可以简单地在每个类中重复该行。

【解决方案3】：

这是一篇很老的帖子，但我偶然发现了它，并想用当前的 CSS :not() 选择器添加到它：

选择两个类

.message.error {}

选择任一类

.message, .error {}

不选择任何类

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

.message {
  border: 1px solid;
}

.error {
  color: red;
}

.message,
.error {
  margin-bottom: 12px;
  padding: 12px;
}

.message.error {
  background: #ffcfcf;
}

div:not(.message):not(.error) {
  font: normal 20px "Comic Sans MS", cursive, sans-serif;
}

<div class="message">
    ONLY .message
</div>

<div class="error">
    ONLY .error
</div>

<div class="message error">
    BOTH classes
</div>

<div class="neither">
    NEITHER class
</div>

【讨论】：