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 dev已经出去了一周，我无法编辑它的输出方式，只能在之后。

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 - 您的代码正在寻找所有h3内的第一个.news-sec

这是一个演示：

.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代码中遗漏了一些引号。

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

2 个答案: