nth-child(1)影响所有DIV

时间:2018-11-05 14:33:26

标签: html css css-selectors

当我使用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>

2 个答案:

答案 0 :(得分:3)

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

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

container-soc
a

答案 1 :(得分:0)

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