时间戳

首页 > 解决方案 > CSS - 目标 3rd div 但跳过子 div

jquery - CSS - 目标 3rd div 但跳过子 div

问题描述

我正在使用 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>

这是一个小提琴，展示了我正在尝试完成的工作，但我相信你已经知道这也计算了主要父 DIV 中的子 DIV。我只想针对“mainInfo”中的第三个“主”DIV 有没有办法通过跳过子 DIv 来实现这一点？如果这可以通过 jQuery 解决，我也会接受。

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

标签： jquerycsswordpresscss-selectorsparent-child

解决方案

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

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

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

推荐阅读