CSS спрайты фон и селекторы

Заранее благодарю вас за любую помощь, которую вы можете оказать. Я впервые внедряю спрайты и хочу упростить свой код. Ниже приведены мои css и 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, поскольку я считаю, что первый стиль переопределяет элементы фоновой позиции (согласно Firebug). Если я копирую копировать background:url('http://10.0.50.19/images/Ratings.png') no-repeat; в каждый из стилей .RatingX_X это работает нормально, но я не хочу повторять background-image и повторите текст, если мне не нужно. Надеюсь, это имеет смысл. Спасибо снова.

2 2
html css css-selectors css-sprites

2 ответа:

  • Самый простой и самый кроссбраузерный способ-добавить общий класс к элементам (<div class="Rating Rating0_5"></div>), а затем просто изменить div[class^='Rating'] на .Rating.

  • Ваше другое возможное решение состоит в том, чтобы исправить специфика селектора в вашем коде. Либо используйте просто [class^='Rating'], либо запишите селекторы классов как div.Rating0_5.

2

Определите свое первое правило следующим образом: 

div[class^='Rating']
{ 
    background-image:url('http://10.0.50.19/images/Ratings.png');
    background-repeat: no-repeat;
    width:68px; 
    height:13px; 
    display:block;
}
И это должно сработать.

На вашем background: Вы не определяете позицию, поэтому он предполагает, что она находится на 0 0 по умолчанию, и поскольку ваш первый селектор больше задан в качестве селекторов фоновой позиции, он переопределяет.

4