CSS sprites背景和选择器 [英] CSS sprites background and selectors
问题描述
感谢您提供任何帮助。我第一次实现精灵,并寻求简化我的代码。下面是我的css和html。
Thank you in advance for any help you can give. I am implementing sprites for the first time and am looking to streamline my code. Below is my css and html.
CSS
div[class^='Rating']
{
background:url('http://10.0.50.19/images/Ratings.png') no-repeat;
width:68px;
height:13px;
display:block;
}
.Rating0_5 { background-position: 0px 0px; }
.Rating1_0 { background-position: 0px -13px; }
.Rating1_5 { background-position: 0px -27px; }
.Rating2_0 { background-position: 0px -41px; }
.Rating2_5 { background-position: 0px -55px; }
.Rating3_0 { background-position: 0px -69px; }
.Rating3_5 { background-position: 0px -83px; }
.Rating4_0 { background-position: 0px -98px; }
.Rating4_5 { background-position: 0px -112px; }
.Rating5_0 { background-position: 0px -125px; }
HTML
<div class="Rating0_5"></div>
<div class="Rating1_0"></div>
....
我遇到的问题是背景位置总是设置为 0px 0px
,因为我相信第一种风格是覆盖background-position元素(根据Firebug)。如果我复制 background:url('http://10.0.50.19/images/Ratings.png')no-repeat;
c> .RatingX_X 样式它工作正常,但我不想重复 background-image
和重复文本,如果我不必。希望这是有道理的。
The issue I am having is the background-position is always being set to 0px 0px
as I believe the first style is overriding the background-position elements (according to Firebug). If I copy copy the background:url('http://10.0.50.19/images/Ratings.png') no-repeat;
to each of the .RatingX_X
styles it works fine but I don't want to repeat the background-image
and repeat text if I don't have to. Hopefully this makes sense. Thanks again.
推荐答案
-
最简单和最跨浏览器的方式是添加您的元素上的公共类(
< div class =Rating Rating0_5>< / div>
),然后简单更改div [class ^ ='评分']
到.Rating
。The easiest and most cross-browser way would be to add a common class on your elements (
<div class="Rating Rating0_5"></div>
) and then simply changediv[class^='Rating']
to.Rating
.可能的解决方案是修复 选择器特性 你的代码。
或者使用[class ^ ='Rating']
或者将你的类选择器写成div.Rating0_5
。Your other possible solution is to fix the selector specificity in your code. Either use simply
[class^='Rating']
or write your class selectors asdiv.Rating0_5
.这篇关于CSS sprites背景和选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!