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

我正在使用grunticon为每个span带有一个.icon类的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。该过程是将每个选择器添加到另一个配置为生成 svgs 的编码文件中。

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