css - 通过 css3 选择嵌套元素

Question

如何通过 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>

Answer 1

你的选择器有一些缺陷

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

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

:是伪类
::是伪元素

区别在这里得到了很好的解释:
What is the difference between a pseudo-class and a pseudo-element in CSS?

第二个问题是您将类选择器与伪类选择器结合使用。 (修复了此处的 :)

.row:nth-child(3)

这不是假的。
但是我相信您使用它来选择第三个.row元素。嗯，没有 nth-of-class选择器。这个选择器的作用是选择 third child 也有 .row类。

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

所以我建议您过滤 div ，而不是类(class)。为此，请使用伪选择器 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>