如何仅用CSS根据元素是否存在设置margin-top属性？

一、如何根据div元素是否存在来修改其margin-top值？ #

这个得分两种场景来看：

• 如果是要修改该div自身的margin-top：CSS本身没有直接检测“元素是否存在”的选择器，但可以通过结构关系间接实现。比如默认给这个div设置一个基础的margin-top，如果它处于某个特定结构下（比如前面有某个兄弟元素），再用选择器覆盖样式。举个例子：

  /* 默认样式 */
  .target-div { margin-top: 20px; }
  /* 当.target-div前面有.prev-element时，修改margin-top */
  .prev-element + .target-div { margin-top: 40px; }
  

  这相当于间接判断了.target-div存在且符合结构条件时的样式。
• 如果是要修改其他元素的margin-top，基于这个div是否存在，那就可以用兄弟选择器来实现，具体逻辑和下面第二个问题类似。

二、能否仅通过CSS实现基于#radio3存在性设置#radio4的margin-top？ #

完全可以！你给出的代码其实已经是正确的实现方案了，咱们来拆解一下逻辑：

• #radio3 + #radio4 { margin-top: 260px; }：这是相邻兄弟选择器，只有当#radio3在DOM中存在，并且和#radio4是紧挨着的兄弟元素时，这条样式才会生效，给#radio4设置260px的上边距。
• #radio4 { margin-top: 230px; }：这是兜底的基础样式，当#radio3不存在时，没有前面的选择器覆盖，#radio4就会应用230px的上边距。

不过有几个小细节要注意哦：

1. 元素结构要求：#radio3和#radio4必须是同一父元素下的相邻兄弟，如果中间有其他元素插着，相邻兄弟选择器+就不会生效。这种情况下可以改用通用兄弟选择器~，比如#radio3 ~ #radio4 { margin-top: 260px; }，只要#radio3在#radio4前面（不管中间有没有其他元素），样式就会生效。
2. 关于元素可见性：如果#radio3是被display: none隐藏的，相邻兄弟选择器依然会生效——因为CSS选择器是基于DOM结构的存在性，而不是元素的可见状态。如果需要判断#radio3是否未隐藏（比如不是display:none），那单纯CSS就做不到了，这时候就得借助JavaScript来检测元素的计算样式，再动态修改#radio4的margin-top。

内容的提问来源于stack exchange，提问作者fosho