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

Question

Ok so I have several blocks of code that look like:

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

My trouble is that the class is being output by drupal. I need the first one not to have the bootstrap classes, however because they are all the same field they all get spit out wrapped up in the col-xs-# divs. I figure I can write some css to negate the effects of bootstrap such as:

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

What I've learned though is that this will affect every .news-sec top level h3 instead of looking at only the first .news-sec . Is there a way to accomplish what I want to do without js.

PS My drupal dev is out for the week and I can't edit the way it's being output, only after.

Answer 1

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

Answer 2

.news-sec:first-child h3 is what you want. This gets the first .news-sec and applies the style to its h3 . Note how I've applied the pseudo selector ( :first-child ) to the .news-sec instead of the h3

(Compare this to your code: .news-sec h3:first-of-type -- Your code was looking for the first h3 inside of all .news-sec )

Here's a demo:

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

Side note: You're missing some quotes in your provided HTML code near each col-xs-4 .