Question

有一个网站，其代码类似于我在以下jsfiddle上放置的代码： https://jsfiddle.net/roa8k7js/

该网站的CSS样式非常复杂，超过10,000行。在将该站点切换到WordPress时，样式一直得到保留，所有内容都变成了主题。

这样，每个<section>现在都在包装器内。因此，样式无法正确运行。

<section>填充由许多规则决定，包括至少一个使用+选择器的主要规则。

规则如下：

#layout1 .option-b:not(.custom-bg-image) + .option-b:not(.custom-bg-img)
{
  padding-top: 0;
}

由于添加了包装器，+选择器将无法正确识别模式：

<div class="wrapper1">
  <section class="option-b">This is some text</section>
</div>
<div class="wrapper1">
  <section class="option-b">This is some more text - there shouldn't be any padding on top of this one</section>
</div>

section {
  border: 1px solid black;
}

#layout1 .container1>section {
  padding-top: 2em;
  padding-bottom: 2em;
}

#layout1 .option-b:not(.custom-bg-image)+.option-b:not(.custom-bg-img) {
  padding-top: 0;
}

#layout1 .container1>.wrapper1>section {
  padding-top: 2em;
  padding-bottom: 2em;
}

<div id="layout1">
  <div class="container1">
    <section class="option-b">This is some text</section>
    <section class="option-b">This is some more text - notice how there isn't a padding top on this one</section>
  </div>
</div>

<div id="layout1">
  <div class="container1">
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
    <div class="wrapper1">
      <section class="option-b">This is some more text - there shouldn't be any padding on top of this one</section>
    </div>
  </div>
</div>

我正在尝试确定是否有一种简单的方法来调整CSS，以便它可以在下一个包装器中正确识别<section>来为top-padding设置值

还请注意，无法删除包装，并且所有部分的样式均正确，没有它们。

Answer 1

兄弟选择器不能与不具有相同层次结构的元素一起使用。有关信息，请参见here：

相邻的同级组合器（+）分隔两个选择器并匹配第二个元素，前提是第二个元素紧跟在第一个元素之后，并且两者都是同一父元素的子元素。

以下是一些解决方法（假设如您的示例所示，每个包装器只有2个<section>）

给它另一个覆盖填充的类（到目前为止最简单）
仅定位nth元素
JavaScript

1）只需将“ no padding”类添加到您不希望添加到其中的元素：

section {
  border: 1px solid black;
}

.wrapper1 > section {
  padding-top: 2em;
  padding-bottom: 2em;
}

.wrapper1 > section.pt-0 {
  padding-top: 0;
}

<div id="layout1">
  <div class="container1">
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
    <div class="wrapper1">
      <section class="option-b pt-0">This is some more text - there shouldn't be any padding on top of this one</section>
    </div>    
    <div class="wrapper1">
      <section class="option-b pt-0">This is some more text - there shouldn't be any padding on top of this one</section>
    </div>    
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
  </div>
</div>

2）定位nth元素

section {
  border: 1px solid black;
}

.wrapper1 > section {
  padding-top: 2em;
  padding-bottom: 2em;
}

.wrapper1:not(:first-child) > section {
  padding-top: 0;
}

<div id="layout1">
  <div class="container1">
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
    <div class="wrapper1">
      <section class="option-b">This is some more text - there shouldn't be any padding on top of this one</section>
    </div>
  </div>
</div>

3）当然是javascript：

const elems = document.querySelectorAll('#layout1 .wrapper1 > .option-b:not(.custom-bg-image)');

if (elems.length > 1) elems[1].style.paddingTop = 0;

section {
  border: 1px solid black;
}

.wrapper1 > section {
  padding-top: 2em;
  padding-bottom: 2em;
}

<div id="layout1">
  <div class="container1">
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
    <div class="wrapper1">
      <section class="option-b">This is some more text - there shouldn't be any padding on top of this one</section>
    </div>
  </div>
</div>

使用+选择器在另一个元素中为同一类设置样式

1 个答案: