Question

当我使用soc-box:nth-child(1) {background-color : red}或.container-soc:nth-child(1) {background-color : red}时，它适用于所有div，但我希望它仅适用于第一个div。

当我在div上包裹一个<a>标签时就发生了。

.container-soc:nth-child(1) {background-color : red}

 <div class="soc-box">
 
   <a href="http://sample.com">
      <div class='container-soc'>
      <img src="img/tel.svg" class='iconDetails' >
        <div class="texti">
	    <h4>Item 1</h4>
     </div>
    </div>
   </a>

  <a href="http://sample.com">
    <div class='container-soc'>
     <img src="img/twitter.svg" class='iconDetails' >
      <div class="texti">
      <h4>Item 2</h4>
     </div>
   </div>
  </a>
 
</div>

Answer 1

是的，不是您要测试Exam<ctrl+space><return>是否是任何事物的第一个孩子-它始终在这里。

您可以检查您的Example<T>标签。

container-soc

Answer 2

:nth-child(x)占据父元素的x的每一分之一，在一个元素的情况下，每个元素都是一个。

如果是两个，则为第二个元素。

:first-child将用作选择器

.soc-box a:first-child .container-soc {
  background-color: red
}

<div class="soc-box">

  <a href="http://sample.com">
    <div class='container-soc'>
      <img src="img/tel.svg" class='iconDetails'>
      <div class="texti">
        <h4>Item 1</h4>
      </div>
    </div>
  </a>

  <a href="http://sample.com">
    <div class='container-soc'>
      <img src="img/twitter.svg" class='iconDetails'>
      <div class="texti">
        <h4>Item 2</h4>
      </div>
    </div>
  </a>

</div>

nth-child（1）影响所有DIV

2 个答案: