CSS

Question

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

代码如下：

.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 显示我正在努力完成的事情，但我相信你已经知道这也计算了主要内容中的 child DIV parent DIV 也。我只想定位 "mainInfo" 内的第 3 个 "main" DIV 有没有办法通过跳过 child DIvs 来实现这个目标？如果这可以通过 jQuery 解决，我也接受。

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

Answer 1

在两个选择器之间添加 "direct child" 连接：

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

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

Answer 2

只需使用 > select 或 (CSS selectors reference)，这会强制 select 引导孩子。

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

Selects all "div:nth-of-type(3)" elements where the parent is a ".mainInfo" element

.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 但跳过 Child Divs

CSS - Target 3rd div but skip Child Divs

wordpress

jquery

parent-child

css-selectors