html - 定位特定元素的通用容器

Question

无论如何我们可以定位元素的容器吗？我似乎找不到方法，这里有一个例子：

的HTML：

<div class="wrapper">
   <div class="content" id="TopSection">
      <span>Box A</span>
   </div>
</div>

<div class="wrapper">
   <div class="content" id="BottomSection">
      <span>Box B</span>
   </div>
</div>

包装器和内容都具有样式类，例如：

.wrapper {
    background-color: black;
 }

 .content {
    padding: 10px 20px;
 }

如何仅在BottomSection 上更改包装器的背景颜色，而不添加另一个包装器类，即wrapperB？那么我们可以定位仅包含该 ID 的包装器吗？

Answer 1

您可以使用 jQuery 定位父母，添加一个您可以使用 CSS 定位的类：

$('#BottomSection').closest('.wrapper').addClass('changeMe');

Answer 2

尝试这个-

.wrapper {
background-color: black;
}

.wrapper:nth-child(2) {
background-color: orange;
}

.content {
padding: 10px 20px;
}