时间戳

首页 > 解决方案 > 如何在第二个框中选择 h2 元素？

html - 如何在第二个框中选择 h2 元素？

问题描述

我正在使用引导网格结构。我用 css 编写了一个包含 3 个框的块。但我无法选择第二个和第三个 h2 元素。

 <!-- 1st BOX-->
<div class="col-lg-6">
    <div class="kutu">
      <h2>1st TITLE</h2>

      <div class="items">
      </div>
      <h3>test</h3>
    </div>
    <a href="#">test</a>
</div>
<!-- 1st BOX END-->


<!-- 2st BOX-->
<div class="col-lg-6">
    <div class="kutu">
      <h2>2nd TITLE</h2>

      <div class="items">
      </div>
      <h3>test</h3>
    </div>
    <a href="#">test</a>
</div>
<!-- 2st BOX END-->


<!-- 3st BOX-->
<div class="col-lg-6">
    <div class="kutu">
      <h2>3rd TITLE</h2>

      <div class="items">
      </div>
      <h3>test</h3>
    </div>
    <a href="#">test</a>
</div>
<!-- 3st BOX END-->

我尝试了这些方法，但我没有成功。我使用了 nth-child 和 nth-of-type，但我想要的结果不是。我怎样才能做到这一点？谢谢

.kutu { 
      width: 600px;
      height: 300px;
      overflow: hidden;
    }
.kutu:nth-of-type(2) h2{
      color: red;
    }
.kutu:nth-of-type(3) h2{
      color: green;
    }

标签： htmlcss

解决方案

问题是类在兄弟元素的内部

.kutu { 
      width: 600px;
      height: 300px;
      overflow: hidden;
    }
.kutu:nth-of-type(2) h2{
      color: red;
    }
.kutu:nth-of-type(3) h2{
      color: green;
    }
<!-- 1st BOX-->
<div class="col-lg-6 kutu">
    <div class="">
      <h2>1st TITLE</h2>

      <div class="items">
      </div>
      <h3>test</h3>
    </div>
    <a href="#">test</a>
</div>
<!-- 1st BOX END-->


<!-- 2st BOX-->
<div class="col-lg-6 kutu">
    <div class="">
      <h2>2nd TITLE</h2>

      <div class="items">
      </div>
      <h3>test</h3>
    </div>
    <a href="#">test</a>
</div>
<!-- 2st BOX END-->


<!-- 3st BOX-->
<div class="col-lg-6 kutu">
    <div class="">
      <h2>3rd TITLE</h2>

      <div class="items">
      </div>
      <h3>test</h3>
    </div>
    <a href="#">test</a>
</div>
<!-- 3st BOX END-->
I tried these methods, but I am not successful. I used nth-child and nth-of-type, but my desired result was not. How can I do that? Thank you

推荐阅读