Perché il: link pseudo class ha previsto le regole di specificità CSS previste?

A mio avviso, lo CSS specificity rules indica che una pseudo classe ha lo stesso peso di un selettore di tag. Quindi un selettore come "div p a" sarebbe più specifico di "a: link".Perché il: link pseudo class ha previsto le regole di specificità CSS previste?

Ma come dimostra il seguente caso di test, 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 selettore "div.foobar p a".

fonte

2009-11-26 timmfin

La specifica si collega a stati che una pseudo-classe (:link in questo caso) ha una specificità superiore a un nome di elemento. Per essere precisi, utilizzando il formato abcd, i tuoi tre selettori escono come:

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

vostra confusione possibile deriva dall'uso del termine "selettore di pseudo", che non riesce a riconoscere la distinzione tra pseudo-classi come :link e pseudo-elementi come :first-line.

fonte

2009-11-26 15:30:28 NickFitz

Sì, non mi rendevo conto che c'è una differenza tra uno pseudo-selettore e una pseudo-classe. Forse c'è una ragione per cui una pseudo-classe ha un peso maggiore, ma almeno nel mio caso, sembra rendere più difficile la codifica degli stili generici "a: link". Penso che cambierò semplicemente il modello di wordpress che sto modificando per usare "a {color: XXX}" invece di "a: link {color: XXX". – timmfin

Ricorda che un elemento 'a' non deve essere un collegamento; può invece essere un'ancora, da collegare * a * tramite un frammento di URL.Questo è il motivo principale per il ': link' e le relative pseudo-classi: per consentire agli elementi' a' che i collegamenti sono distinti da quelli che non lo sono. Considera anche l'uso delle pseudo-classi appropriate (': link',': visited', ': hover',': focus' e ': active') per migliorare l'usabilità riflettendo lo stato dell'interazione dell'utente con la pagina/sito ; A me, in particolare, non piacciono le pagine con un numero di link che non definiscono uno stile distinto per ': visited'. – NickFitz

Specificità per ciascuna:

a: link 0,0,1,1

div p un 0,0,0,3

a: link vittorie.

fonte

2009-11-26 15:25:00

Secondo il link CSS specifiche di cui sopra: "li: first-line/* a = 0 b = 0 c = 0 d = 2 -> specificità = 0,0,0,2 * /" A meno che la specifica ha un refuso o ": first-line" è meno specifica di ": link", I "a: link" dovrebbe essere 0,0,0,2. – timmfin

Vedi la mia risposta,: la prima riga è uno pseudo-elemento, non una pseudo-classe! –

Come ha detto Gab: link è una pseudo-classe. la specificità per a: link è 0,0,1,1. –

La cosa è :link non è una pseudo-elemento come :first-line, si tratta di una pseudo-classe e conta come una classe per la specificità così.

Source

fonte

2009-11-26 15:28:26

Ed è per questo che le versioni più recenti delle specifiche CSS distinguono gli pseudo-elementi dalle pseudo-classi con un '::' invece di un ':'. –

Perché il: link pseudo class ha previsto le regole di specificità CSS previste?

risposta

Problemi correlati