Почему псевдокласс: link нарушает ожидаемые правила специфичности CSS? - PullRequest
Новая
       4

Почему псевдокласс: link нарушает ожидаемые правила специфичности CSS?

6 голосов
/ 26 ноября 2009

Насколько я понимаю, правила специфичности CSS указывают, что псевдокласс имеет тот же вес, что и селектор тега. Таким образом, селектор типа «div p a» будет более конкретным, чем «a: link».

Но, как показывает следующий тестовый пример, это не так. Почему ссылка красная? 

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">

    <style type="text/css" media="screen">
        a:link { color: red; }
        div p a { color: green; }
        div.foobar p a { color: green; }
    </style>
</head>
<body>
    <div>
        <p>
          <a href="http://somecrazyurlwierdthing.com">A link... why is it red?</a>  
        </p>
    </div>

    <div class="foobar">
        <p>
          <a href="http://somecrazyurlwierdthing.com">But it turns green when you add a class selector.</a>  
        </p>
    </div>
</body>
</html>

Отредактировал пример для включения селектора div.foobar p a.

Ответы [ 3 ]

6 голосов
/ 26 ноября 2009

В спецификации, на которую вы ссылаетесь, указано, что псевдокласс (в данном случае :link) имеет более высокую специфичность, чем имя элемента. Чтобы быть точным, используя формат a-b-c-d, ваши три селектора получаются как: 

a-b-c-d
0 0 1 1
0 0 0 3
0 0 1 3

Ваша путаница возможна из-за использования вами термина "псевдо-селектор", который не распознает различия между псевдоклассами, такими как :link, и псевдо-элементами, такими как :first-line.

5 голосов
/ 26 ноября 2009

Дело в том, что :link не является псевдоэлементом, подобным :first-line, это псевдокласс и, следовательно, считается классом для специфичности.

Источник

2 голосов
/ 26 ноября 2009

Специфичность для каждого:

a: ссылка 0,0,1,1

div p a 0,0,0,3

a: ссылка побеждает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...