在某些Div旁边更改div的CSS

Question

我正在尝试根据CSS的位置更改CSS。我根据用户想要放置适当div的位置进行动态定位。例如，我有一个具有margin:40px 0;的twitter div，如此：

然而，当它位于页脚旁边的底部时，我希望它有

margin:40px 0 0 0; 

这是为了消除这个差距：

所以我只希望某些容器div css根据它们在另一个页脚或标题旁边的位置而改变。这可能吗？我希望这很清楚。

我无法提供代码，因为有7个容器div通过PHP中断排序，具体取决于用户放置该块的位置。如果它是NEXT到页脚或标题div我需要它没有边距。所以

<header></header>
<div class="container">
    <div class="information"></div>
    <div class="block-1"></div>
    <div class="block-1"></div>
    <div class="block-1"></div>
    <div class="block-1"></div>
    <div class="block-1"></div>
    <div class="twitter"></div>
</div>
<footer></footer>

Answer 1

根据您的评论和编辑，您可能想要使用第一个子项和最后一个子项选择器：

https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

.twitter { margin: 40px 0; }
.container .twitter:first-child, .container .twitter:last-child { margin: 40px 0 0 0; }

因此，如果Twitter是.container中的第一个或最后一个孩子，那么请使用该特定样式。

或者

.twitter { margin: 40px 0; }
.container .twitter:first-child, .container .twitter:last-child { margin-bottom: 0; }

这样，如果您决定稍后40px，则不需要在2个地方更改42px。您只需要在1个地方更改它。

或者如果你只是想让twitter div没有页眉下方或页脚上方的边距，那么

.twitter { margin: 40px 0; }
.container .twitter:first-child { margin-top: 0; } 
.container .twitter:last-child  { margin-bottom: 0; }