Targeting di elementi nidificati con CSS

Question

Diciamo che ho un markup profondamente annidato che voglio scegliere come target con i CSS. Potrebbe essere qualsiasi cosa, ma per esempio:

<div> 
    <div id='someid'> 
     <span class='someclass'> 
      <a class='link' href='alink'>Go somewhere</a> 
     </span> 
    </div> 
<div> 

È accettabile per scrivere una regola CSS mira il tag <a> direttamente, in questo modo?

a.link { font-size: large; } 

Oppure è considerato non standard che potrebbe non funzionare in alcuni browser? Devo scegliere come target ogni elemento della catena in questo modo?

div div span.someclass a.link { font-size: large; } 

Answer 1

Entrambi sono completamente accettabili e la risposta dipende dalla soluzione specifica. Ad esempio, se hai altre aree in cui condividi proprietà comuni definite da quella classe, dovresti mantenerla il più generale possibile. Se per esempio si dispone di una navigazione ei collegamenti in quella zona condividono alcuni elementi comuni quelli poteva essere definito da a.link

Poi nel tuo html nidificato, si potrebbe fare qualcosa di simile

.someclass a.link {font-size:8px} per fare quel testo più piccolo.

Ecco un articolo che illustra come funziona la specificità: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

Il più mirato a rendere il vostro CSS il meno flessibile diventa. È il tuo compromesso. Se darai ai link una classe specifica come quella, sono abbastanza sicuro che saranno visivamente gli stessi sia che compaiano all'interno di questo albero o al di fuori di esso in modo da poter rimanere con il tuo primo esempio.

Answer 3

a.link è il modo migliore per farlo. Se vuoi che un certo a.link sia diverso dal resto, dovrai aggiungere un po 'di peso ad esso.

a.link { ... } /* Global */ 
span.someclass a.link { ... } /* Finds all a.link within span.someclass */ 

selettori discendenti (linea 2) non sono il modo più efficace per aggiungere stile a un elemento, in modo da utilizzare con parsimonia. Personalmente, li uso quando devo dare stili speciali a una classe globale all'interno di un determinato ID/Classe.

Answer 4

In realtà è raccomandato l'uso di a.link al posto del lungo, seconda opzione brutto, che può causare problemi di specificità e di prestazioni.

È ancora meglio se si utilizza solo .link. Questa è l'opzione migliore.

Answer 5

Entrambi sono perfettamente validi e quello che si utilizza dipende da ciò che si desidera fare.

Se si sta creando una classe generica che si desidera essere in grado di utilizzare tutto il vostro intero sito a prescindere dell'elemento e dove l'elemento è, si dovrebbe solo uso .class. Un buon esempio per questo è qualcosa come .icon che potresti voler usare su collegamenti, voci di elenco, intestazioni ecc. E vuoi poterli usare ovunque.

Se si sta creando una classe specifica per/funziona solo su un determinato elemento di tipo, è preferibile utilizzare anche l'elemento nel selettore.Un esempio di ciò potrebbe essere un elenco puntato che si desidera visualizzare su una riga, dal momento che questa classe richiede che l'HTML sia un <ul> che si dovrebbe specificare anche nel CSS; ul.inline. In questo modo puoi usare il nome di classe "inline" anche per altri elementi, senza che lo stile abbia effetto su entrambi.

Se si utilizza solo la classe per selezionare l'elemento ma non dovrebbe avere uno stile generico, si dovrebbe essere specifici. Ad esempio, è possibile che il primo paragrafo nell'elemento #blog-post sia più grande, quindi è necessario specificare sia la classe #blog-poste; #blog-post p.first (nota che questi tipi di classi sono raramente necessari più grazie a selettori avanzati come :first-of-type, h2 + p ecc.).

Dire che ".link è il migliore, a.link è il secondo migliore e un selettore lungo è male" è semplicemente sbagliato. Tutto dipende dalla situazione.