通过css3选择嵌套元素

debugcn 发表于 Dev

五度

如何通过 css 隐藏强线...？

是第三行的.col-md-12...不是行，是col

.bannerHeader .row:nth-child(3) .col-md-12 {display:none}

不运行....

.bannerHeader .row::nth-child(3) .col-md-12 {
  display: none
}

<div class="bannerHeader"><br>
  <div class="row"><br>
    <div class="col-md-12"><br>
      <div class="gwt-Label gwt-Label-BannerFormatLink">Text</div><br>
    </div><br>
  </div><br>
  <div class="row"><br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-Label Inline">Text</div><br>
        </div><br>
      </div><br>
    </div><br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-Label Inline">Text</div><br>
        </div><br>
      </div><br>
    </div><br>
  </div><br>
  
  <div class="row"> <br>
<!-- this col should be selected -->
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-HTML Inline">Text</div><br>
        </div><br>
      </div> <br>
    </div><br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-HTML Inline">Text</div><br>
        </div><br>
      </div><br>
    </div><br>
  </div><br>
</div>

领英

你的选择器有一些缺陷

.bannerHeader .row::nth-child(3) .col-md-12 { }

在您问题的第一个版本中，您使用::nth-child双冒号。

:是伪类
::是伪元素

区别在这里得到了很好的解释：
CSS 中的伪类和伪元素有什么区别？

第二个问题是您将类选择器与伪类选择器结合使用。（修复了:这里）

.row:nth-child(3)

这不是假的。
但是，我相信您可以使用它来选择第三个.row元素。好吧，没有nth-of-class选择器。这个选择器的作用是选择第三个也有.rowclass 的孩子。

这不会给你你想要的。
如果您查看我的代码段中的 HTML，我已经评论了.bannerHeader. 该<br />也算儿童。所以第三个.row实际上是第六个孩子。

因此，我建议您过滤div, 而不是类。为此，请使用伪选择器nth-of-type：

.bannerHeader div:nth-of-type(3)

此外，您还可以添加.row选择器。在我看来，这已经过时了。

.bannerHeader div.row:nth-of-type(3)

然后在编辑后，您说要选择第一个.col-md-12. 与上面相同，您不能nth-在类上使用，因此再次使用nth-of-type. 在这种情况下:first-of-type或等价物nth-of-type(1)。

您还需要使用直接子>选择器：

.bannerHeader div:nth-of-type(3) > div:first-of-type
/* or */
.bannerHeader div.row:nth-of-type(3) > div.col-md-12:first-of-type

全部一起：

.bannerHeader div:nth-of-type(3) > div:first-of-type {
  border: 1px solid red;
}

<div class="bannerHeader">
  <!-- child 1 -->
  <br> 
  <!-- child 2 -->
  <div class="row"><br>
    <div class="col-md-12"><br>
      <div class="gwt-Label gwt-Label-BannerFormatLink">Text</div><br>
    </div><br>
  </div>
  <!-- child 3 -->
  <br>
  <!-- child 4 -->
  <div class="row"><br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-Label Inline">Text</div><br>
        </div><br>
      </div><br>
    </div><br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-Label Inline">Text</div><br>
        </div><br>
      </div><br>
    </div><br>
  </div>
  <!-- child 5 -->
  <br>
  <!-- child 6 -->
  <!-- this row should be selected -->
  <div class="row"> <br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text to be selected</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-HTML Inline">Text to be selected</div><br>
        </div><br>
      </div> <br>
    </div><br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-HTML Inline">Text</div><br>
        </div><br>
      </div><br>
    </div><br>
  </div><br>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。