CSS 选择器 - 如何定位特定元素

Question

我正在使用 grunticon 为每个带有 .icon 类的 span 嵌入来自 sprite 表的不同 svg。

我在使用 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。该过程是将每个选择器添加到另一个配置为生成 svg 的编码文件。

我不确定如何更具体地说明有限的元素和限制。任何指针都会很棒。

Answer 1

因此，您需要分别针对每个 .icon 元素，但不想/不能使用 nth-of-type。你可以试试:

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

@编辑

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