如果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,你可以使用一个CSS兄弟选择如果按照.div1样式的一种方式,和"平原"的方式,如果它不 - 即

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

看小提琴.尝试删除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

不

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

注意：使用 CSS，您可以检查元素的某些条件，例如检查元素是否具有属性（如input[type=text]），或检查元素是否是列表的第一个元素（如p:first-child）等。但您无法检查任何内容来自该元素的兄弟元素或祖先。而且大多数时候你无法检查负面条件。