css - 使用 bool 条件组合两个或多个 CSS 选择器

标签 css css-selectors

有没有办法使用 bool 条件组合两个或多个 CSS 选择器 - and , or , not

考虑这个 <div> :

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

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

类似于 div.message && div.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 都有绿色边框,只有“错误消息”div 有红色背景。

关于css - 使用 bool 条件组合两个或多个 CSS 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2144751/

相关文章:

html - 当焦点是另一个元素时更改元素的样式

html - :link pseudo-class? 有什么意义

html - CSS 选择器仅将样式应用于父链接

css - :hover CSS is not working?

javascript - 表单有效时更改背景图像

CSS 选择器获取 HTML 树中特定类的最深元素

html - 使用伪类更改另一个元素的属性?

javascript - 在 ie11 中以横向模式打印

css - 如何在动画结束时旋转图标?

html - 如何在 <p> 元素中的基线上方 "allocate"有足够的垂直空间以支持 <sup> 元素