在没有html的情况下使用css精灵

我已经为多个图像创建了一个css精灵图像。sprite的css是：

.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}

现在我想把这个精灵的第一个图像指定给一个li元素。当前，使用此li的background:url属性将第一个图像分配为：

li{margin-top:0;padding:3px 0 3px 25px;background:url(../images/arrow.gif) 

如何从sprite中获取第一个图像并将其指定给li元素。我看到了一个建议使用的示例：

<div class="sprites" id="image_5306605314403955_gif"></div>

但我想看看是否可以避免添加HTML，并仅为此目的使用CSS。我的页面上的li元素如下所示：

<li><a href="http://www.xyz.com">ABC</a></li>

我不确定这是否是您想要的，但下面的代码应该可以做到这一点：

HTML:

如果你想要的不是使用

class

或

id

，那么我认为这是不可能的，因为你的CSS需要一个标识符来区分你的项目（它们是从同一个类继承的

）

主体{
溢出y：滚动
}
.mini_iframe，
.serverfbml\u iframe{
溢出-y：可见
}
.自动调整iframe的大小{
高度：自动；
溢出：隐藏
}
.烟斗{
颜色：灰色；
填充：0 3px
}
#内容{
保证金：0；
大纲：无；
填充：0；
宽度：自动
}
.profile#内容，
.home#content，
.搜索#内容{
最小高度：600px
}
.UIS标准框架_容器{
保证金：0自动；
填充顶部：20px；
宽度：960像素
}
.UIS标准框架内容{
浮动：左；
保证金：0；
填充：0；
宽度：760像素
}
.UIS标准框架{
浮动：对；
保证金：0；
填充：0；
宽度：200px；
换行：打断单词
}
.UIFullPage_容器{
保证金：0自动；
填充：20px 12px 0；
宽度：940px
}
.空的_消息{
背景#f5f6f7；
字体大小：13px；
线高：17px；
填充：20px 20px 50px；
文本对齐：居中
}
.再见{
文本对齐：右对齐
}
.标准状态元素{
可见性：隐藏
}
.standard\u status\u element.async\u保存{
可见性：可见
}
图像跟踪像素{
高度：1px；
位置：绝对位置；
可见性：隐藏；
宽度：1px
}

您是否考虑过使用更少或更少的SASS？它并不是你想要的100%，因为它要求你首先编译样式表，但是通过mixin它会达到类似的效果。你有没有可能发布一个我们可以使用的JS Fiddle演示？这应该不难，但如果到目前为止我们能接触到你的工作，我们会更容易地提供帮助。

<li class="sprites"><a id="image_5306605314403955_gif" href="http://www.xyz.com">ABC</a></li>
<li class="sprites"><a id="#image_9167572062810537_gif" href="http://www.xyz.com">ABC</a></li>

.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}
#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}
#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}
#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}
#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}
#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}
#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}