[分享]Css兄弟元素不在一层怎么办

在CSS中，我们可以使用兄弟选择器来选取与指定元素有相同父级元素但不在同一层级的兄弟元素。例如：p + ul { margintop: 20px; } 上面这个选择器可以选取紧接在p元素后面、不在同一...

在CSS中，我们可以使用兄弟选择器来选取与指定元素有相同父级元素但不在同一层级的兄弟元素。例如：

p + ul {
  margin-top: 20px;
} 

上面这个选择器可以选取紧接在p元素后面、不在同一层级中的ul元素，并对其设置上边距（margin-top）为20像素。

但是，如果我们的兄弟元素不在同一个父元素下，该怎么办呢？

一个解决方案是使用通用选择器（*）选取所有元素，并在其后面加上选择器，如下所示：

.parent1 p + .parent2 ul {
  margin-top: 20px;
} 

这个选择器可以选取class为parent1的某个元素下的p元素后面、不在同一层级中的class为parent2元素下的ul元素，并对其设置上边距为20像素。

需要注意的是，这种方法需要在选择器中加入父元素的class或id，因此可能会造成选择器复杂度过高的问题。

另外一个解决方案是使用JavaScript来寻找兄弟元素并添加样式。例如：

let p = document.querySelector('.parent1 p');
let ul = p.nextElementSibling;
ul.classList.add('margin-top'); 

这段JavaScript代码可以选取class为parent1的某个元素下的p元素后面、不在同一层级中的兄弟元素，并给其添加一个class为margin-top的样式类，从而使其获得上边距为20像素的样式效果。

虽然这个方法需要一定的JavaScript编程能力和对DOM的理解，但是相对于CSS选择器的方法，它可以更加灵活地对元素进行选取和样式添加。