Perché la pseudo classe link collega infrange le regole di specificità CSS previste?

StackOverflow https://stackoverflow.com/questions/1804081

  •  05-07-2019
  •  | 
  •  

Domanda

Per quanto mi risulta, le Regole di specificità CSS indicano che un la pseudo classe ha lo stesso peso di un selettore di tag. Quindi un selettore come " div p a " sarebbe più specifico di "a: link".

Ma come dimostra il seguente caso di prova, non sembra essere il caso. Perché il link è rosso? 

<!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>

Modificato l'esempio per includere il " div.foobar p a " selettore.

È stato utile?

Soluzione

La specifica a cui si collega indica che una pseudo-classe (: link in questo caso) ha una specificità superiore rispetto al nome di un elemento. Per essere precisi, usando il formato a-b-c-d, i tre selettori vengono visualizzati come: 

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

La tua confusione possibile deriva dall'uso del termine "pseudo-selettore" che non riconosce la distinzione tra pseudo-classi come : link e pseudo-elementi come : first-line .

Altri suggerimenti

La cosa è : link non è uno pseudo-elemento come : first-line , è una pseudo-classe e quindi conta come una classe per la specificità.

Source

Specificità per ciascuno:

a: link 0,0,1,1

div p a 0,0,0,3

a: il link vince.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top