Question

我正在使用grunticon为精灵表格中嵌入一个不同的svg，每个span都有一个.icon类。

我遇到了css选择器的问题：

<section class="section">
    <div class="padding">
        <h2>Title</h2>
        <ul>
            <li>
                <span class="icon svg-icon-1" data-grunticon-embed></span>
                <span class="title">Title 1</span>
            </li>
            <li>
                <span class="icon svg-icon-2" data-grunticon-embed></span>
                <span class="title">Title 2</span>
            </li>
            <li>
                <a href="#">
                    <span class="icon svg-icon-3" data-grunticon-embed></span>
                    <span class="title">Title 3</span>
                </a>
            </li>
        </ul>
    </div>
</section>

我试过了：

.section li:nth-of-type(1) .icon

.section li:nth-of-type(2) .icon

.section li:nth-of-type(3) .icon

但它们不正确，使用nth-of-type会影响性能。我必须定位.icon类，我不能使用id。该过程是将每个选择器添加到另一个编码文件，该文件配置为生成svgs。

我不确定如何更有针对性地限制元素和限制。任何指针都会很棒。

Answer 1

因此，您需要单独定位每个.icon元素，但不希望/不能使用nth-of-type。你可以尝试：

.section li .icon.svg-icon-1{}
.section li .icon.svg-icon-2{}

@edit

.section li:nth-of-type(1) .icon适合我。 Demo

CSS选择器 - 如何定位特定项目

1 个答案: