класс вложенности CSS для изображения спрайта - PullRequest
Новая
       6

класс вложенности CSS для изображения спрайта

0 голосов
/ 04 апреля 2011

Я просто немного запутался во вложении css Id / class.
Пример кода ниже: 

1) #sprit-img {
    display:inline;
    border:1px solid #FFF;
    text-decoration:none;
    display:block;
    float:left;
    width:50px;
    height:50px;
    background-image:url(ig-sprite.png);
    background-repeat:no-repeat;
    margin:5px;
    }
2) #sprit-img a.brew{
    background-position:2px 0px;}  
3) #sprit-img a.scc{
    background-position:-295px 2px;}

на странице, которую я использовал как 

4) <div id="sprit-img><a class="brew"></a>...</div> `

Теперь я хочуиспользуйте это как 

5) <div class="sprit-img"><a class="brew"></a> <span class="scc"></span></div>`

Вопросы

  1. необходимо ли указывать привязку или какой-либо тег элемента в строке кода 2 и 3 ?
  2. каков был бы оптимальный способ получить строку 5 (если Q1 истинно, чтобы в классе css я удалил # и поместил, но не работал на моей странице)?это правильно

- 

6) .sprit-img{.....same code..}  
    .brew{...same position..}  
    .scc{..same postion...}

и используйте его как в строке 5, или это правильно 

7) .sprit-img{.....same code..}  
    .sprit-img .brew{...same position..}  `

Спасибо.

edit: я попробовал какой-то микс поместить background-image из sprit-img в brew и scc и обнаружил, что если я поставлю style как в 6, html часть должна выглядеть как
<div class="anything"><span class="sprit-img brew"></span></div>
и если я поставлю стиль как в 7 html часть должна быть как
<div class="sprit-img"><span class="sprit-img brew"></span></div>, но не может сделать это как 5, любая идея ...

Ответы [ 2 ]

0 голосов
/ 04 апреля 2011

Q.1: Нет.

Q.2:

Вам нужен способ нацелить оба типа вещей внутри вашего div одновременно, чтобы применить одно и то же изображение bg, а также способ их различить. Есть множество решений.

Если вы уверены, что все, что вложено в sprit-img, должно иметь фон, вы можете сделать это: 

<div class="sprit-img">
    <a class="brew"></a> <span class="scc"></span>
</div>

#sprit-img * { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }

(примечание: * универсальный селектор)

... хотя это может доставить вам неприятности, если вам понадобится какая-либо разметка внутри этих элементов (все будет занимать фоновое изображение, и это будет просто смешной беспорядок)

Итак, если вы уверены, что все дочерние элементы (вложенные только на 1 уровень ниже) должны занимать фон, но ничего внутри этих элементов не должно, тогда вы можете использовать дочерний селектор (>) следующим образом: 

<div class="sprit-img">
    <a class="brew"><span> some text></span>some other text</a> 
    <span class="scc">more text <strong>something important</strong></span><
</div>

#sprit-img > * { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }

если вы хотите избежать универсального селектора (рендеринг может быть медленным на старых машинах или с более ранними версиями браузера), вы можете альтернативно использовать (с разметкой строки 5): 

#sprit-img > a, #sprit-img > span { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }

... который будет применяться только к якорям и пролетам внутри элемента с id = "sprit-img"

Или вы можете вообще избегать названий тегов (если вы очень хорошо разбираетесь в скорости рендеринга) (с разметкой строки 5) 

#sprit-img .bew, #sprit-img .scc { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }

... который иллюстрирует, почему ответ на ваш первый вопрос "нет"

0 голосов
/ 04 апреля 2011

# - селектор идентификатора, . - селектор класса. Таким образом, вы можете изменить на: 

.sprit-img {...}  
.sprit-img .brew {...}  
.sprit-img .scc {...}

и 

<div class="sprit-img"><a class="brew"></a> <span class="scc"></span></div>

Однако реальная проблема заключается в том, что вы пытаетесь использовать не каскадные свойства в .sprit-img для дочерних элементов. Первый селектор должен быть изменен на .sprit-img .brew, .sprit-img .scc

...