jquery - 在某些 Div 旁边更改 div 的 CSS

Question

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

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

margin:40px 0 0 0; 

这是为了消除这个差距:

所以我只希望某些容器 div css 根据它们在另一个页脚或页眉旁边的位置进行更改。这可能吗？我希望这是清楚的。

我无法提供代码，因为有 7 个容器 div 通过 PHP 中断排序，具体取决于用户放置该 block 的位置。如果它位于页脚或页眉 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; }

这样，如果您以后决定将其设为 42px，则无需在 2 个位置更改 40px。您只需在 1 个地方进行更改。

或者如果您只是希望 twitter div 在页眉下方或页脚上方没有边距，那么

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