CSS спрайты фон и селекторы - PullRequest
Новая
       34

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

2 голосов
/ 13 мая 2011

Заранее благодарю за любую помощь, которую вы можете оказать. Я впервые использую спрайты и собираюсь упростить мой код. Ниже мои 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>
....

Проблема, с которой я сталкиваюсь, заключается в том, что background-position всегда устанавливается на 0px 0px, так как я считаю, что первый стиль переопределяет элементы background-position (согласно Firebug). Если я скопирую копию background:url('http://10.0.50.19/images/Ratings.png') no-repeat; в каждый из стилей .RatingX_X, она будет работать нормально, но я не хочу повторять background-image и повторять текст, если мне это не нужно. Надеюсь, это имеет смысл. Еще раз спасибо.

Ответы [ 2 ]

4 голосов
/ 13 мая 2011

Определите ваше первое правило как: 

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, и поскольку ваш первый селектор более определен как ваши селекторы фоновой позиции, он переопределяет.

2 голосов
/ 13 мая 2011

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

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

...