Question

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

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

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

不运行....

＆＃13;

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

＆＃13;

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

＆＃13;

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选择器。这个选择器做了什么，它选择了第三个也有.row类的孩子。

哪个不能给你你想要的东西如果您查看我的代码段中的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

一起来：

＆＃13;

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

＆＃13;

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

＆＃13;

通过css3

1 个答案: