CSS - 目标 3rd div 但跳过子 div [重复]答案

【问题标题】：CSS - Target 3rd div but skip Child Divs [duplicate]CSS - 目标 3rd div 但跳过子 div [重复]
【发布时间】：2019-09-11 19:30:15
【问题描述】：

我正在使用 WordPress 插件，因此我无法在 PHP 端添加一个类，因为这个插件每周都会接收和更新，并且会覆盖我的更改。我需要尝试在前端执行此操作。

代码如下：

.mainInfo div:nth-of-type(3) {
  background-color: #302b44;
  border: 2px solid #FFF;
  padding: 14px;
}

<div class="mainInfo">
  <div>This is the 1st Div
    <div>Lorem ipsum.</div>
    <div>Quis, reiciendis.</div>
    <div>Repudiandae, inventore!</div>
  </div>
  <div>This is the 2nd Div
    <div>Lorem ipsum.</div>
    <div>Voluptates, minima.</div>
    <div>Minima, assumenda?</div>
  </div>
  <div>This is the 3rd Div **The only one I want to select**
    <div>Lorem ipsum.</div>
    <div>Dolores, ullam!</div>
    <div>Sequi, eligendi!</div>
  </div>
  <div>This is the 4th Div
    <div>Lorem ipsum.</div>
    <div>Recusandae, commodi.</div>
    <div>Reiciendis, nostrum.</div>
  </div>
</div>

这是一个fiddle，显示了我要完成的工作，但我确定您已经知道这也计算了主要父 DIV 中的子 DIV。我只想针对“mainInfo”中的第三个“主”DIV 有没有办法通过跳过子 DIv 来实现这一点？如果这可以通过 jQuery 解决，我也会接受。

仅供参考：就像我说的那样，这是一个 WP 插件，因此第一个和第二个主 DIV 内部根据用户输入具有不同数量的子 DIV。

【问题讨论】：

标签： jquery css wordpress css-selectors parent-child

【解决方案1】：

在两个选择器之间添加“直接子”连接：

.mainInfo > div:nth-of-type(3) {

这样它就不会匹配.mainInfo 的孙子。

【讨论】：

【解决方案2】：

只需使用 > 选择器 (CSS selectors reference)，它会强制选择直接子代。

.mainInfo > div:nth-of-type(3) {

选择所有父元素为“.mainInfo”元素的“div:nth-of-type(3)”元素

.mainInfo > div:nth-of-type(3) {
  background-color: #302b44;
  border: 2px solid #FFF;
  padding: 14px;
}

<div class="mainInfo">
  <div>This is the 1st Div
    <div>Lorem ipsum.</div>
    <div>Quis, reiciendis.</div>
    <div>Repudiandae, inventore!</div>
  </div>
  <div>This is the 2nd Div
    <div>Lorem ipsum.</div>
    <div>Voluptates, minima.</div>
    <div>Minima, assumenda?</div>
  </div>
  <div>This is the 3rd Div **The only one I want to select**
    <div>Lorem ipsum.</div>
    <div>Dolores, ullam!</div>
    <div>Sequi, eligendi!</div>
  </div>
  <div>This is the 4th Div
    <div>Lorem ipsum.</div>
    <div>Recusandae, commodi.</div>
    <div>Reiciendis, nostrum.</div>
  </div>
</div>

【讨论】：