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