Question

我正在使用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”内部的第三个“ main” DIV，是否可以通过跳过子DIv来实现此目的？如果这可以通过jQuery解决，我也将接受。

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

Answer 1

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

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

那样，它与.mainInfo的孙子不匹配。

Answer 2

只需使用>选择器（CSS selectors reference），该选择器将强制选择直接子代。

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

选择所有“ div：nth-of-type（3）”元素，其中父元素是“ .mainInfo”元素

.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>

CSS-目标第3个div，但跳过子级

2 个答案: