Что означает этот код CSS? - PullRequest
       0

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

0 голосов
/ 02 февраля 2011

Я наткнулся на этот определенный кусок кода и не получил его.

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?

Спасибо

Ответы [ 3 ]

8 голосов
/ 02 февраля 2011

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

#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 { ... }

.

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

1 голос
/ 02 февраля 2011

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

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

ul

это говорит о том, что вы выбираете каждый тег UL

ul li

это говорит о том, что вы выбираете только теги li, содержащиеся в теге UL

ul li a

это говорит о том, что вы выбираете только теги a, которые содержатся в указанном li tgas, которые содержатся в теге ul. Это не будет выбирать теги a, у которых нет родителя li в любом листе. например, это не выберет <body><a></a></body>

но это выберет <ul><li><div><a></a></div></li></ul>

the: hover - это безопасный триггер, который вызывается при наведении мыши на элемент.

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

не забывайте, что только один предмет имеет одинаковый идентификатор, пара предметов может иметь одинаковый класс, а один предмет может иметь 2 или более разных классов

добавление идентификатора:

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

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

добавление имен calss

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

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

1 голос
/ 02 февраля 2011

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

или

A <ul> это потомок <ul>, это потомок <li> с мышью над ним, это потомок чего-то с id="nav".

Etc.

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

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

...