如何定位元素首次出现的第一个孩子

Question

好的，所以我有几个看起来像这样的代码块：

    <div class="news-sec">
        <h3 class="col-xs-8">heading</h3>
        <p class="col-xs-4>paragraph</p>
    </div>
  <div class="news-sec">
        <h3 class="col-xs-8">heading</h3>
        <p class="col-xs-4>paragraph</p>
    </div>
  <div class="news-sec">
        <h3 class="col-xs-8">heading</h3>
        <p class="col-xs-4>paragraph</p>
    </div>

我的麻烦是该类由drupal输出。 我需要第一个没有bootstrap类，但是因为它们都是相同的字段，所以它们都被打包在col-xs-# div中。 我想我可以写一些CSS来抵消引导的影响，例如：

.news-sec h3:first-of-type{
    width:100%;
    float:none;
}

但是我了解到，这将影响每个.news-sec顶级h3而不是仅关注第一个.news-sec 。 有没有一种方法可以在没有js的情况下完成我想做的事情。

PS我的drupal开发人员已经用了一周的时间，只有在之后，我才能编辑其输出方式。

Answer 1

.news-sec h3:first-child定位第一个，并且仅第一个。

Answer 2

.news-sec:first-child h3是您想要的。 这将获取第一个.news-sec并将样式应用于其h3 。 注意我如何将伪选择器（ :first-child ）应用于.news-sec而不是h3

（将此与您的代码进行比较： .news-sec h3:first-of-type您的代码正在所有.news-sec寻找第一个h3 ）

这是一个演示：

 .news-sec:first-child h3 { color: red } 

 <div class="news-sec"> <h3 class="col-xs-8">heading</h3> <p class="col-xs-4">paragraph</p> </div> <div class=" news-sec "> <h3 class="col-xs-8">heading</h3> <p class="col-xs-4">paragraph</p> </div> <div class="news-sec"> <h3 class="col-xs-8">heading</h3> <p class="col-xs-4">paragraph</p> </div> 

旁注：您在每个col-xs-4附近的HTML代码中缺少一些引号。