Voglio creare un menu in cui ogni elemento è separato con un ·. Per raggiungere questo obiettivo, utilizzoVa bene usare più pseudo-elementi in css?
menu li:before {
content: "· ";
}
Questo è ottimo, ma genera anche un punto prima del primo elemento. Pertanto, vorrei usare anche la pseudo-classe :first-child. Posso farlo?
Certo che puoi - http://jsfiddle.net/WQBxk/
p:before {
content: "BEFORE ";
display: block;
}
p:first-child:before {
content: "1ST";
display: block
}
La cattiva - non funzionerà in IE7 e al di sotto. Non a causa dei molteplici pseudo selettori, ma a causa del non supportato :before - http://kimblim.dk/css-tests/selectors/
Appena testato in IE8 - funziona bene.
È possibile utilizzare più pseudo-classi, ma non è possibile utilizzare più pseudo-elementi. È qui che la distinzione tra i due diventa importante (e l'uso del termine "pseudo-selettori" può causare una potenziale confusione). – BoltClock
Ehi, stavo per fare una domanda simile a questa, ma poi ho visto questa domanda per usare più pseudo-classi così ho deciso di porre la mia domanda in questi commenti. [Qui] (https://jsfiddle.net/NathanielSantley/nLnjbf50/6/) è il mio violino. Voglio che mostri "Email non valida!" in rosso se è davvero un'e-mail non valida e "Email valida!" in verde se è un'e-mail valida. C'è qualcosa che sto sbagliando? – NathanielSantley
Ecco il violino di lavoro: http://jsfiddle.net/surendraVsingh/zRrLF/
<ul>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
</ul>
CSS:
li:before{content:'. ';}
li:first-child:before{content:'@ ';}
Naturalmente è possibile utilizzare pseudo classes.They sono abbastanza ben supportato da IE8 e up.You può controllare la compatibilità di qualsiasi pseudoclasse che si sta per usare qui http://caniuse.com/#search=after
Se non si desidera un j dot utilizzare le virgole vuote nel contenuto e quindi visualizzare: bloccare e specificare anche altezza e larghezza.
menu li:before {
content: "";
display:block;
width:50px;
height:50px;
background:red;
}
Funziona nel webkit atleast ... – Himmators
funziona correttamente con il browser moderno. Ho usato una volta hover e dopo le lezioni. E si è svegliato. – SVS
Evviva per i browser moderni! Che non si trasformino mai in vecchio stile! – Himmators