<分区>
<分区>
我正在尝试通过“nth-child”选择器定位“i”元素，但我不知道该怎么做。你能给我解释一下吗？ 在提供的代码中，我尝试使用 SASS
<ul class="nav-social">
<li>
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-youtube"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
</ul>
我是如何尝试的:
.nav-social {
li a {
margin-right: 0.5rem;
i {
font-size: 1.5rem;
// border: 1px solid red;
border-radius: 50%;
background: rgba(0, 0, 0, 0);
color: whitesmoke;
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
&:nth-child(1) {
color: green;
}
}
}
}
最佳答案
您需要选择 ul(父级)的 nth-child。所以你需要定位 li 元素:
.nav-social
{
li
{
a
{
margin-right: 0.5rem;
i
{
font-size: 1.5rem;
// border: 1px solid red;
border-radius: 50%;
background: rgba(0, 0, 0, 0);
color: whitesmoke;
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
}
}
&:nth-child(1)
{
a
{
i
{
color: green;
}
}
}
}
}
关于css - 无法通过第 nth-child 定位其他元素内的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57099809/