如果一个div不存在，你能在CSS中应用CSS规则吗？

Question

请问，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>

- M K

---

这是无法通过CSS实现的。要达到这种效果，请使用Javascript。 - Kyle

Answer 1

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

---

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

选项1：.div2紧跟在.div1后面

.div1 + .div2 {
  property: value;
}

选项二： .div2 作为兄弟元素跟随在 .div1 后面：

.div1 ~ .div2 {
  property: value;
}

---

样式化 .div2，但不包含 .div1:

这有点像一个hack，但你可以反过来做。首先样式化 .div2，然后使用上面的选择器覆盖样式。

如果不存在 .div1，.div2 就会得到正常的样式。

.div2 {
  background: #fff;
}

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

/* or */

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

- Frexuz

---

你知道如果.div1在.div2下面，我们如何使其工作，并且我们想根据.div1是否可用来设置.div2的样式吗？ - Neophile

不，没有选择器可以在DOM树中进行“向后”导航 :/ 根据布局，您可能可以使它们在DOM中按正确顺序排列，但绝对/相对地设置样式以使它们看起来像已交换。但是，我可能会使用CSS类。 - Frexuz

如何使用CSS类在DOM树中向后遍历？ - Neophile

如果您有后端语言来确定是否呈现div1，则在.div2上使用css类。如果没有，您可以使用JavaScript检查div1是否存在，并向div2添加一个类。 - Frexuz

Answer 2

如果你知道 div 的“未渲染”样式，你可以使用 CSS 兄弟选择器来根据其是否跟在 .div1 后面来为其设置样式，如果是则设置一种方式，否则设置为“普通”样式 - 即:

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

查看fiddle。尝试删除div1，看看div2在没有div1的情况下样式如何。

- Jordan Wallwork

Answer 3

一般来说，不行。

但是您可以使用CSS选择器进行“黑客攻击”，我指的是：

+ .something 选择器

~ .something 选择器

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

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

所以大致如下：

.div1 {
  color: red;
}

.div2 {
  color: blue;
}

.div1 ~ .div2 {
  color: black;
}

以这种方式，第一个HTML片段中的将是黑色的，而第二个片段中的将是蓝色的。

- Alessandro Vendruscolo

Answer 4

不行

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

注意：使用CSS可以检查某些元素的条件，比如检查一个元素是否具有属性（比如input[type=text]），或者检查一个元素是否是列表中的第一个元素（比如p:first-child）等等。但是你无法检查元素的兄弟元素或祖先元素的任何内容。同时，大多数情况下你也无法检查否定条件。

- Saeed Neamati

Answer 5

不，这是不可能的。但是你可以创建一个名为"div3"的类，在你的代码中判断DIV1是否存在，如果存在则应用"div3"类而不是"div2"类。

- Pleun