Действительно ли порядок стилей имеет значение?

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

спасибо! константин


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>
    <style type="text/css" media="all">
        .menu a
        {
            text-decoration: none;
        }
        .menu li:hover a
        {
            color: black;
        }
        .menu li a:hover
        {
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="#">item0</a></li>
            <li><a href="#">item1</a></li>
        </ul>
    </div>
</body>
</html>

Ответ 1

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

<div class="red green">

Какая из этих побед?

.green { color: green; }
.red { color: red; }

.red выигрывает здесь, не имеет значения порядка в атрибуте class, все, что имеет значение, - это порядок, в котором стили определены в самом CSS.

Ответ 2

Рассмотрим следующий HTML.

<div class="red">
    Some red text...
</div>

И этот CSS..

.red {color: red}
.red {color: blue}
.red {color: yellow}

Вы догадались, текст будет желтым!

Ответ 3

Да, порядок имеет значение, и в этом случае это не тот порядок, из-за которого вы получаете тот же результат независимо от порядка.

.menu li:hover a применяется к li, который является родительским элементом a, и наведение не применяется к a, оно применяется к li.

.menu li a:hover применяется к a.

Независимо от порядка стиль .menu li a:hover будет применен к a.

Лучший способ справиться с этим состоит в том, чтобы псевдо-селектор hover применялся только к элементу a и делал на нем набор display: block, при этом height и width устанавливались на 100%. Это заполнит весь li

Надеюсь, что это прояснит ситуацию.

Ответ 4

Да, да. Последняя точка каскадного порядка читает:

Наконец, выполните сортировку по указанному порядку: если два объявления имеют одинаковый вес, происхождение и специфичность, последний указывает выигрыши. Объявления в импортированных таблицах стилей считаются перед любыми объявлениями в самой таблице стилей.

Ответ 5

Правила CSS применяются в том порядке, если они имеют одинаковую специфичность. В вашем случае они делают, поэтому порядок имеет значение.

С заказом, который у вас есть в вашем вопросе, применяются правила text-decoration: none. Второе и третье правила приводят к зависанию мыши над ссылкой для изменения этих двух стилей в порядке, поскольку тег a находится внутри тега li. Во-первых, цвет становится черным; затем цвет становится красным и появляется подчеркивание.

Отмените порядок последних двух правил:

    .menu a
    {
        text-decoration: none;
    }
    .menu li a:hover
    {
        color: red;
        text-decoration: underline;
    }
    .menu li:hover a
    {
        color: black;
    }

Теперь text-decoration: none применяется, как и раньше. Затем, при переходе мыши, первое правило изменяет цвет на красный и добавляет подчеркивание, а затем цвет меняется на черный.