Html 类型的第n个在较少的时间内不起作用

我正在设计一个网站，我需要应用一些额外的定位由于奇怪的定位（或不同大小？）的图标

这是相关的html代码：

<div class="footer-social">
    <div class="social-button"><span class="fa fa-facebook fa-3x"></span></div>
    <div class="social-button"><span class="fa fa-twitter fa-3x"></span></div>
    <div class="social-button"><span class="fa fa-linkedin fa-3x"></span></div>
</div>

---

第二个和第三个跨度没有调整到我给他们的额外位置。我这里缺少什么？

更少的代码没有问题，因此它应该编译得很好。问题在于HTML结构与Less生成的选择器不匹配

当前代码在

.social button

元素中查找类型为

span

的第二个元素和第三个元素，然后尝试设置它们的样式。只有当所有三个

span

标记都在同一个

.social按钮
标记中时，这才有效，如下所示

<div class="footer-social">
    <div class="social-button"> 
        <span class="fa fa-facebook fa-3x">a</span>
        <span class="fa fa-facebook fa-3x">b</span>
        <span class="fa fa-facebook fa-3x">c</span>
    </div>
</div>

这将为两个选择器之间的差异以及它们如何工作提供一个小的直观说明，具体取决于您的HTML结构。
更少的代码没有问题，因此它应该可以编译得很好。问题在于HTML结构与Less生成的选择器不匹配

当前代码在
.social button
元素中查找类型为
span
的第二个元素和第三个元素，然后尝试设置它们的样式。只有当所有三个
span
标记都在同一个
.social按钮
标记中时，这才有效，如下所示

<div class="footer-social">
    <div class="social-button"> 
        <span class="fa fa-facebook fa-3x">a</span>
        <span class="fa fa-facebook fa-3x">b</span>
        <span class="fa fa-facebook fa-3x">c</span>
    </div>
</div>

这将为两个选择器之间的差异以及它们如何根据HTML结构工作提供一个小的视觉说明。
这不是意味着社交按钮中的第二个跨度吗？-在这种情况下，只有一个问题不是你的代码太少，它应该编译得很好。它不起作用，因为您的HTML结构与较少的选择器不匹配。在
.social按钮中
您只有一个
span
。因此，您的第二个跨度样式永远不会应用。您需要修改较少的选择器结构，如。注意：我添加了一些虚拟值。请检查这是否解决了你的问题。是的，成功了，汉克斯！对我来说，在声明了第n个类型（以前从未见过）之后，再次将span放在另一行似乎很奇怪，这是否意味着社交按钮中的第二个span在这种情况下，只有一个问题不是你的代码太少，它应该编译得很好。它不起作用，因为您的HTML结构与较少的选择器不匹配。在
.social按钮中
您只有一个
span
。因此，您的第二个跨度样式永远不会应用。您需要修改较少的选择器结构，如。注意：我添加了一些虚拟值。请检查这是否解决了你的问题。是的，成功了，汉克斯！对我来说，在声明了第n种类型（以前从未见过）之后，再次将span放在另一行似乎很奇怪。那么一个微小的呢？@seven phases max:是的，当然。最初开始在第二个和第三个
div
中添加额外的属性，但为了简单起见，删除了它，但忘记删除额外的行：）从技术上讲，它甚至可能是这样的，但我想这一行可能是一个过分的杀伤力（对于没有准备好的读者来说太混乱了：）。对于有经验的读者来说更简单，但对于新手来说需要时间来掌握。那么一个小的呢？@seven phases max:是的。最初开始在第二个和第三个
div
中添加额外的属性，但为了简单起见，删除了它，但忘记删除额外的行：）从技术上讲，它甚至可能是这样的，但我想这一行可能是一个过分的杀伤力（对于没有准备好的读者来说太混乱了：）。对于有经验的读者来说更简单，但对于新手来说需要时间来掌握。
.social-button {
    span {
        color: red;
    }
    &:nth-of-type(2) span {
        background-color: beige;
    }
    &:nth-of-type(3) span {
        background-color: pink;
    } 
}