如果 div 不存在，您可以在 CSS 中应用 CSS 规则吗？答案

【问题标题】：Can you apply CSS rules, in CSS, if a div doesn't exist?如果 div 不存在，您可以在 CSS 中应用 CSS 规则吗？
【发布时间】：2014-02-05 02:06:40
【问题描述】：

这可以用 CSS 吗？

如果 .div1 不存在，则应用此规则：

.div2{
  property: value;  
}

喜欢

<div class="div1">
...
</div>

<div class="div2">
 <!-- it exists, so do nothing -->
</div>

和

<div class="div2">
 <!-- it doesn't exist, apply the css -->
</div>

【问题讨论】：

【解决方案1】：

存在还是不存在？你的问题让我很困惑:)

如果.div1 存在，则将样式应用于.div2：

选项 1： .div2 在.div1 之后直接跟随

.div1 + .div2 {
  property: value;
}

选项 2： .div2 跟随 .div1 作为同级：

.div1 ~ .div2 {
  property: value;
}

样式 .div2 不带 .div1：

这有点小技巧，但你可以反过来做。通常为 .div2 设置样式，然后使用上面的选择器覆盖样式。

如果.div1 不存在，.div2 将获得正常样式。

.div2 {
  background: #fff;
}

.div1 + .div2 {
  background: #f00; /* override */
}

/* or */

.div1 ~ .div2 {
  background: #f00; /* override */
}

【讨论】：

如果 .div1 低于 .div2 并且我们想根据 .div1 是否可用来设置 .div2 的样式，您知道我们如何进行这项工作吗？
没有。在 DOM 树中没有选择器可以“向后”：/ 根据布局，您可以在 DOM 中以正确的顺序排列它们，但将它们设置为绝对/相对的样式，使其看起来像是被切换的。但是，我可能会改用 CSS 类。
css类在DOM树中向后遍历？
.div2 上的 css 类，如果您有后端语言来确定是否呈现 div1。如果没有，你可以使用javascript检查div1是否存在，并在div2中添加一个类。

【解决方案2】：

如果您知道 div 的“未设置样式”样式，则可以使用 css 同级选择器在 .div1 之后以一种方式对其进行样式设置，如果不遵循 .div1 则使用“普通”方式 - 即

.div2 {
    /* styled however you want */
}
.div1 + .div2 {
    /* 'plain' styling */
}

See the fiddle. 尝试删除 div1 以查看 div2，因为如果没有 div1，它将被设置样式

【讨论】：

【解决方案3】：

一般来说，不，你不能那样做。

但你可以使用 CSS 选择器“破解”它，我指的是：

我会使用第二个选择器，即“通用兄弟”选择器。

鉴于您发布的 HTML，您可以将样式应用于 .div2 类，然后使用 .div1 ~ .div2 选择器重置它。

所以是这样的：

.div1 {
  color: red;
}

.div2 {
  color: blue;
}

.div1 ~ .div2 {
  color: black;
}

这样，在第一个 HTML sn-p 中，div2 将是黑色的，而对于第二个 sn-p，它将是蓝色的。

【讨论】：

【解决方案4】：

没有

仅使用 CSS，检查元素可用性的if 条件是不可能的。您应该使用 JavaScript，（推荐使用 jQuery）。

注意：使用 CSS 你可以检查一个元素的一些条件，比如检查一个元素是否有属性（比如input[type=text]），或者检查一个元素是否是列表的第一个元素（比如p:first-child），等等。但是你不能从元素的兄弟元素或祖先中检查任何东西。而且大多数时候你不能检查负面条件。

【讨论】：

【解决方案5】：

不，这是不可能的。但是您可以创建类“div3”并在您的代码中确定 DIV1 是否存在，在这种情况下应用“div3”类而不是“div2”

【讨论】：