CSS选择其直接兄弟不是p的div

Question

我遇到这种情况：

{1}}的转换是在1秒延迟后，然后淡入100％不透明度：

entering

transition: opacity 1s ease 1s; 上的转换是在1秒内淡出0％不透明度：

leaving

1秒后删除transition: opacity 1s; 元素。删除后，我想在.leaving

上position:static

换句话说：＆＃34;当.entering后面没有.leaving时，应用position：static＆＃34;和＃34;当.entering之后是.leaving它应该是position：absolute＆＃34;

我正在尝试这个

.entering

然而它不起作用。有什么想法吗？

让我们以简化的方式使用背景颜色来做这个例子。如果.entering { position: absolute; } .entering:not(+ .leaving) { position: static; } 后跟.entering，则其背景颜色应为红色。如果.leaving后跟非.entering（或后面没有任何内容），则其背景颜色应为绿色。

例如：

当没有离开时：

我在这个小提琴中试过这个颜色案例 - https://jsfiddle.net/Noitidart/7utx2uwc/

.leaving

Answer 1

请更改两个div的顺序，然后使用CSS设置样式：

HTML

<div class="leaving">leaving</div>
<div class="entering">entering</div>

CSS

.entering {
  background-color:red;
}
.leaving + .entering {
  background-color:green;
}

请看演示： https://jsfiddle.net/7utx2uwc/3/

Answer 2

你问了

  

如果.entering后面是.leaving，它的背景颜色应为红色。如果.entering后面跟着非.leaving（或后面没有任何东西），它的背景颜色应该是绿色。

您无法向上选择元素。换句话说，你不能根据孩子或下一个兄弟来设置上层元素的样式。

这就是CSS的工作原理。因此，我们需要jQuery或JavaScript。因此，仅使用CSS无法完成。