html - 第 n 个类型的选择器未按预期工作

Question

我只想从 #section_5 中选择第一个 h2 和第一个 p，因此我使用了这个 CSS:

#section_5 div:nth-of-type(1) h2{
    color:green;
}
#section_5 div:nth-of-type(1) p{
    color:blue;
}

但它选择了 #section_5 的所有其他子 div，这似乎不满足选择器:nth-of-type(1)

/*style the more features title*/
#section_5 div:nth-of-type(1) h2{
    color:green;
}

/*style the more features paragraph*/
#section_5 div:nth-of-type(1) p{
    color:blue;
}

<div id="section_5">                    
    <div class="row just_space1 title">
        <div class="col-12 text-center">
            <h2>The Limitation Of Design Is Never Ending With Our Features</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quod consequuntur 
	quibusdam, enim expedita sed quia nesciunt incidunt accusamus necessitatibus modi 
	adipisci officia libero accusantium esse hic, obcaecati, ullam, laboriosam!</p>
        </div>
    </div>
    <div>
        <div>
            <div>
                <span>&#xe011;</span>
                <p>Danything</p>
                <h2>anything t</h2>
                <p>anything</p>
            </div>
            <div>
                <span>&#xe011;</span>
                <p>Danything</p>
                <h2>anything t</h2>
                <p>anything</p>
            </div>
        </div>
        <!-- /Features column 1 -->
	
        <!--Image to style the section-->
        <div class="col-12 col-md-8">
            <p>
                ssss
            </p>
        </div>
        <div> 
            <div>
                <span>&#xe011;</span>
                <p>Danything</p>
                <h2>anything t</h2>
                <p>anything</p>
            </div>
            <div>
                <span>&#xe011;</span>
                <p>Danything</p>
                <h2>anything t</h2>
                <p>anything</p>
            </div>
        </div>
    </div>   
</div>
<!--/Section 5-->

您能否阐明这一点，还是我做错了？

Answer 1

您需要考虑 > selector以避免选择嵌套元素。您的选择器将选择任何级别的 nth-of-type(1) 的所有 div，而不仅仅是 div 的子级 #section5。

/*style the more features title*/
#section_5 > div:nth-of-type(1) h2 {
  color: green;
}


/*style the more features paragraph*/
#section_5 > div:nth-of-type(1) p {
  color: blue;
}

<div id="section_5">
  <div class="row just_space1 title">
    <div class="col-12 text-center">
      <h2>The Limitation Of Design Is Never Ending With Our Features</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quod consequuntur quibusdam, enim expedita sed quia nesciunt incidunt accusamus necessitatibus modi adipisci officia libero accusantium esse hic, obcaecati, ullam, laboriosam!</p>
    </div>
  </div>
  <div>
    <div> <!-- this div is also  nth-of-type(1) -->
      <div> <!-- this div is also  nth-of-type(1) -->
        <span>&#xe011;</span>
        <p>Danything</p>
        <h2>anything t</h2>
        <p>anything</p>
      </div>
      <div>
        <span>&#xe011;</span>
        <p>Danything</p>
        <h2>anything t</h2>
        <p>anything</p>
      </div>
    </div>
    <div class="col-12 col-md-8">
      <p>
        ssss
      </p>
    </div>
    <div>
      <div> <!-- this div is also nth-of-type(1) -->
        <span>&#xe011;</span>
        <p>Danything</p>
        <h2>anything t</h2>
        <p>anything</p>
      </div>
      <div>
        <span>&#xe011;</span>
        <p>Danything</p>
        <h2>anything t</h2>
        <p>anything</p>
      </div>
    </div>
  </div>
</div>
<!--/Section 5-->