Что означает этот код css?

Question

Я наткнулся на эту определенную часть кода и не получил ее.

1>

#nav ul, 
#nav li:hover ul ul, 
#nav li:hover li:hover ul ul, 
#nav li:hover li:hover li:hover ul ul, 
#nav li:hover li:hover li:hover li:hover ul ul{} 

2>

#nav li:hover li:hover a.fly, 
#nav li:hover li:hover li:hover a.fly, 
#nav li:hover li:hover li:hover li:hover a.fly, 
#nav li:hover li:hover li:hover li:hover li:hover a.fly{} 

А вот HTML код:

<ul id="nav"> 
    <li class="top"><a href="#" class="top_link"><span>Home</span></a></li> 
    <li class="top"><a href="#" id="products" class="top_link"><span class="down">Products</span></a> 
     <ul class="sub">     
      <li><a href="#" class="fly">Cameras</a> 
       <ul> 
        <li><a href="#">Nikon</a></li> 
        <li><a href="#">Minolta</a></li> 
        <li><a href="#">Pentax</a></li> 
       </ul> 
      </li> 

      <li class="mid"><a href="#" class="fly">Lenses</a> 
       <ul> 
        <li><a href="#">Wide Angle</a></li> 
        <li><a href="#">Standard</a></li> 
        <li><a href="#">Telephoto</a></li> 
        <li><a href="#" class="fly">Zoom</a> 
         <ul> 
          <li><a href="#">35mm to 125mm</a></li> 
          <li><a href="#">50mm to 250mm</a></li> 
          <li><a href="#">125mm to 500mm</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Mirror</a></li> 
       </ul> 
      </li> 

      <li><a href="#">Flash Guns</a></li> 
      <li><a href="#">Tripods</a></li> 
      <li><a href="#">Filters</a></li> 
     </ul> 
</li> 
    <li class="top"><a href="#" id="services" class="top_link"><span class="down">Services</span></a> 
     <ul class="sub"> 
      <li><a href="#">Printing</a></li> 
      <li><a href="#">Photo Framing</a></li> 
      <li><a href="#">Retouching</a></li> 
      <li><a href="#">Archiving</a></li> 
     </ul> 
    </li> 

</ul> 

---

Может кто-нибудь сказать мне, какие области адресованы в вышеуказанных 2 блоках кода CSS?

Благодаря

Answer 1

Я бы сказал, что это оригинальный разработчик, а не вас, кто не получает его.

#nav ul, 
#nav li:hover ul ul, 
#nav li:hover li:hover ul ul, 
#nav li:hover li:hover li:hover ul ul, 
#nav li:hover li:hover li:hover li:hover ul ul { 

} 

Там нет ни одного элемента соответствует по #nav li:hover li:hover li:hover li:hover ul ul, который уже не соответствует по #nav ul. То же самое можно сказать и о другом наборе селекторов.

Список разделов, разделенных запятыми, в CSS, означает: «примените это для всех элементов, которые соответствуют любым из этих критериев».

Теперь в обоих примерах верхний селектор также будет соответствовать любому элементу, который соответствует любому из последующих селекторов, что делает их избыточными. Следующие селекторы исключительно повышают специфичность.

Если были разных блоков CSS после каждого селектора, тогда код имел смысл, хотя это было бы довольно уродливо. Я предполагаю, что это основано на коде, который использовал разные стили на разных уровнях дерева (для управления текстовым отступом, скажем), который затем был реорганизован на код, который может быть одинаковым для всех селекторов.

Кто-то понял, что, так как стили в каждом блоке одинаковы, все селекторы могут быть объединены, но не понимал, что код может быть переработан еще дальше, просто #nav ul { ... }

Я угадывая, что у пустых блоков { } на самом деле были какие-то стили в них, которые вы оставили, для удобочитаемости? Конечно, если бы они были полностью пустыми, как в вашем примере, было бы безопасно полностью удалить селекторы .

Answer 2

A <ul> Это потомок чего-то с id="nav".

или

<ul> это потомок <ul>, это происходящий из <li>, который имеет над ним мышь, это потомок что-то с id="nav".

Etc.

Как отмечалось, первая линия уже соответствует всем, что остальное соответствует. Возможно, детское отношение (>) предназначалось, а не просто потомком.

Вторая аналогична избыточна.

Answer 3

Firat и секунда также как запрос они выбирают элементы внутри элемента

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

ul 

это saysyou выбрать все UL тег

ul li 

Тхи s говорит, что вы выбираете только Li-теги, содержащиеся внутри тега UL

уль Ли с

это говорит, что вы выберите только теги а Wich содержащиеся в указанной Li Tgas, которые содержатся в уль теге это не отберет теги, которые не имеют ли родителя в любом листе. например, это не отберет <body><a></a></body>

butthis отберет <ul><li><div><a></a></div></li></ul>

в: парить является secified инициирующего события, которое вызывается при наведении указателя мыши на элемент.

оператор # это говорит, что вы искать идентификационный приписывал тег точки . оператора вы ищете для Wich пункта приписываемого с классом оленем

не забудьте только один элемент имеет тх же идентификатор, вырезать пару пунктов могут иметь один и тот же класс, и один элемент может иметь 2 или больше другого класса

Добавление ID:

<div id="important-div"></div> 

это означает, что DIV является identificated с важной-DIV идентификатор вы с fint этот узел с этим именем. как и ваш номер кредитной карты, никто не имеет того же, что и вы.

добавляющие calssnames

<a class="clickable redborder nomargin"></a> 

это означает, что вам тег имеет 3 имя_класса, вы можете добавить стили с селектором интерактивного класса, а также с другими также