Question

我正在设计一个网站，我需要应用一些额外的定位，因为奇怪的定位（或不同尺寸？）的fontawesome图标。

这是相关的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>

这里是相关的较少代码：

.footer-social {
        float: right;
        margin-right: 73.5rem;
        margin-top: 8rem;
        .social-button {
            width: 4.3rem;
            height: 4.3rem;
            background-color: @accentColor;
            color: white;
            border-radius: 50%;
            margin-left: 10px;
            display: inline-block;
            span {
                line-height: 4.3rem;
                position: relative;
                left: 11px;
                &:nth-of-type(2) {
                    left: 8px;
                }
                &:nth-of-type(3) {
                    left: 9px;
                }
            }
        }
    }

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

Answer 1

你的Less代码没有问题，因此它应该编译得非常好。问题在于，您的HTML结构与Less。

生成的选择器不匹配

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

<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结构，您实际上需要将样式应用于第2和第3个元素下的span标记，类为social-button。因此，您的Less结构应该修改如下。（注意：我刚刚使用了一些示例属性来进行说明）。

.social-button {
    span {
        color: red;
    }
    &:nth-of-type(2) span {
        background-color: beige;
    }
    &:nth-of-type(3) span {
        background-color: pink;
    } 
}

这个demo会根据您的HTML结构，对两个选择器之间的区别以及它们的工作方式进行简单的视觉说明。

nth-of-type不能正常工作

1 个答案: