Question

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

考虑这个<div>：

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

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

div.message && div.error的某些内容？

Answer 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有红色背景。

Answer 2

尝试div.message.error。

Answer 3

这是一个非常古老的帖子，但是我碰到了它，并想使用当前的CSS :not()选择器将其添加到其中：

同时选择两个班级

.message.error {}

选择EITHER班级

.message, .error {}

选择NEITHER类

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>

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

3 个答案: