Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Расшифруйте css код

#1 LadyRi

LadyRi
  • Пользователь
  • 15 сообщений
  • Репутация: 0
0

Отправлено 09 Февраль 2013 - 17:35

.head .Menu>.BG>i>b{display:block;padding-top:59px;height:0;overflow:hidden;font-size:0;background:url(../images/menu.png) 0 -118px repeat-x;}

в css немножко разбираюсь, но почему вначале два id и head и menu, что значит за ними знак больше и точка, что значат следующие знаки больше.

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 09 Февраль 2013 - 20:54

.head .Menu>.BG>i>b{display:block;padding-top:59px;height:0;overflow:hidden;font-size:0;background:url(../images/menu.png) 0 -118px repeat-x;}

1) у вас не id: имя с точкой описывает класс. id описывается именем с решеткой:
#head{background: #ccc;}

2) последовательная запись селекторов (через пробел) означает контекстный селектор, т.е.
.head .Menu{background: #ccc;}
означает, что серый фон будет у всех блоков с классом "Menu" вложенных в блоки с классом "head" (причем любого уровня вложенности):
Пример (у первых двух блоков с классом "Menu" фон будет серым, а у последнего нет)
<style>
body{background: #fff;}
.head .Menu{background: #ccc;}
</style>
<body>
<div class="head">head
  <div class="Menu">Menu</div>
  <div>
   <div class="Menu">Menu</div>
  </div>
</div>
<div class="Menu">Menu</div>
</body>

3) запись селекторов через знак ">" обозначает дочерний селектор, т.е.
.Menu>.BG{background: #ccc;}
означает, что серый фон будет у всех блоков с классом "BG", вложенных в блоки с классом "Menu" (причем только на первом уровне вложенности).
Пример (серый фон будет только у первого блока с классом "BG")
<style>
body{background: #fff;}
.Menu>.BG{background: #ccc;}
</style>
<body>
<div class="Menu">Menu
  <div class="BG">BG</div>
  <div>
   <div class="BG">BG</div>
  </div>
</div>
<div class="BG">BG</div>
</body>

Дальше сами расшифруете?
  • 2

#3 LadyRi

LadyRi
    Topic Starter
  • Пользователь
  • 15 сообщений
  • Репутация: 0

Отправлено 16 Февраль 2013 - 08:34

Спасибо! дальше да. и это удобно, да? не проще все отдельно расписать..)
  • 0

#4 WebMaster

WebMaster
  • Пользователь
  • 97 сообщений
  • Репутация: 3

Отправлено 29 Март 2013 - 08:50

А как отдельно?) И может во имя оптимизации CSS файла и уменьшения веса было принято решение верстать именно так. Можно конечно использовать и :last-child и :first-child, но в каких то случаях проще использовать и символы ">". На самом деле, все зависит от того, как человек верстает, от его стиля. Я всегда использую :last-child и :first-child. Мне так удобно.
  • 0


Оформление форума – IPBSkins.ru