如果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>

Answer 1

如果你知道div的'unstyled'样式，你可以使用css兄弟选择器，如果它遵循.div1，则使用一种方式设置样式，如果它没有，则可以使用'plain'方式 - 即

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

See the fiddle.尝试删除div1以查看div2，因为它将在没有div1的情况下进行样式设置

Answer 2

存在还是不存在？你的问题让我困惑：）

---

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

选项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 */
}

Answer 3

NO

仅使用CSS，无法检查元素可用性的if条件。你应该使用JavaScript，（建议使用jQuery）。

注意：使用CSS，您可以检查元素的某些条件，例如检查元素是否具有属性（如input[type=text]），或检查元素是否是列表的第一个元素（如{{1但是你不能从元素的兄弟元素或祖先中检查任何东西。此外，您无法在大多数时间检查负面情况。

Answer 4

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

Answer 5

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

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

• + .something选择器
• ~ .something选择器

我会使用第二个选择器，它是“一般兄弟”选择器。

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

这样的事情：

.div1 {
  color: red;
}

.div2 {
  color: blue;
}

.div1 ~ .div2 {
  color: black;
}

通过这种方式，使用第一个HTML代码段，div2将为黑色，而第二个代码段将为蓝色。