css - 如果元素 B 包含某个类，则对元素 A 应用样式

Question

是否可以检查元素的类，看它是否存在，然后将样式应用到另一个类？

示例伪代码:

if (.myClass .myBlock == true) { 
  .otherClass { 
    display:none 
  }
}

Answer 1

在这种情况下这是不可能的。但是您可以通过 CSS 的级联特性获得类似的结果。

将类应用到您网站的主体:

.another-class {
    display: none; // hides .another-class by default
}

body.special-class {
    .another-class {
        display: block; // shows if the body contains .special-class
    }
}

由于在第二条规则中生成的输出的特异性更高，因此带有 .another-class 的元素将是可见的。

给下面一行一个类

利用 + 选择器使我们能够在提到的类 之后显示行。假设我们有以下 HTML，我们可以通过这种方式设置下拉菜单弹出窗口的样式:

.popup {
  display: none;
}

.popup:hover {
  display: block;
}

.container:hover + .popup {
  display: block;
}

<div class="container">Hover me!</div>
<div class="popup">This is a popup!</div>

恐怕这就是 CSS 的所有可能。