如果两个div相邻，我只能使用＆＃34; +＆＃34;来影响CSS中的最后一个div。运算符，我该如何影响第一个？

Question

在我的代码中，我有一个结构，如：

<div class=block1">
..
</div>
<div class="block2">
</div>

这两个块可以通过页面构建器在用户处更改。

现在，碰巧block1 本身有一些特殊的CSS属性，当它在其下一个/之前有另一个特殊块（在我们的例子中为block2）时，它不应该存在。

block1属性：

border-bottom: 1px solid black;
padding-bottom: 30px;
..
..

block2属性：

margin-top: 30px;
border-top: 2px solid;

所以你可以看到有冲突的属性，他们看起来很糟糕。我的目标是从block1而不是block2中删除属性。 （我知道我可以从block2中删除，但这是一个完美的情况，我可以从block2中删除它使其工作，但它很少这么容易。）

这是一个可视化：

此代码允许我判断block2是否位于block1之后，如下所示：

.block1 + .block2 {
//If block2 is after, do some changes to block2
}

我想要影响.block1，例如：

if(.block1 + .block2) -> .block1 {
    border-bottom: 0; //remove the border bottom so it doesn't look bugged.
    padding-bottom: 0; //cut the paddig since it's not necessary.
}

除了JS之外，我找不到任何解决方案，我试图想出用CSS编写的东西。

Answer 1

您需要做的是：

1. 将相同的样式应用于每个div
2. 从您希望设置样式的最后一个div重置样式

关于悬停的示例：

＆＃13;
＆＃13;
div, h1 {
  padding: 0.1em;
  color: blue;
  border: solid;
  margin: 0.25em;
}

article div:hover~div,
.end,
.end  ~div,
h1{/* reset here whate ever you need */
  color: initial/* foo example */
}
＆＃13;
<article>
  <div><h1>test hovering to see it working.</h1></div>
  <div>Do i have any-style ?</div>
  <div>Do i have any-style ?</div>
  <div>Do i have any-style ?</div>
  <div>Do i have any-style ?</div>
</article>
<hr/>
<section>
  <div><h1>test via class, same selector involved</h1></div>
  <div>Do i have any-style ?</div>
  <div class="end">Do i have any-style ?</div>
  <div>Do i have any-style ?</div>
  <div>Do i have any-style ?</div>
  <div>Do i have any-style ?</div>
</section>
＆＃13;
＆＃13;
＆＃13;

CSS有否＆＃34;以前的兄弟选择器＆＃34; 。