我正在使用 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 的编码文件。
我不确定如何更具体地说明有限的元素和限制。任何指针都会很棒。
最佳答案
因此,您需要分别针对每个 .icon
元素,但不想/不能使用 nth-of-type
。你可以试试:
.section li .icon.svg-icon-1{}
.section li .icon.svg-icon-2{}
@编辑
.section li:nth-of-type(1) .icon
适合我。
Demo
关于CSS 选择器 - 如何定位特定元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43023448/