css, sélectionnez ancrage précédent

Question

<ul class="list"> 
    <li><a href="">Text 1</a></li> 
    <li><a href="">Text 2</a></li> 
    <li><a href="" class="selected">Text 3</a></li> 
</ul> 

Comment sélectionner l'ancre pour Text 2 sans ajouter une classe supplémentaire? (Et pas javascript)

<style type="text/css"> 
    ul.list li a.selected ******{background-color:#000} 
</style> 

sortie:

<li><a href="" style="background-color:#000;">Text 2</a></li> 

Answer 1

Il semble que vous êtes à la recherche d'un sélecteur de frères et soeurs précédent, qui n'existe malheureusement pas. Voir this post pour des liens utiles sur ce qui est possible.

Answer 2

Sans javascript vos résultats ne fonctionneront pas toujours dans chaque navigateur. Vérifiez ce lien par sitepoint

Ceci est la façon dont cela serait fait en utilisant CSS3, Ce pesudo-classe n'est actuellement pas pris en charge dans Internet Explorer.

<style type="text/css"> 
ul.list li:nth-child(2) a { background:#000 } 
</style> 

Answer 3

le nième sélecteur enfant peut le faire. le support du navigateur varie.

essayer:

ul.list li:nth-child(2) a { background:#000; }

Ref: http://reference.sitepoint.com/css/pseudoclass-nthchild

Answer 4

Je ne pense pas qu'il existe un moyen de sélectionner simplement le * élément enfant. (Sauf élément firstChild, qui vous permet d'indiquer le premier élément enfant.) Mais sinon, vous pouvez affecter toujours le même numéro ID de à l'élément li, par exemple

<li id="1"><a href="">Text 1</a></li> 
<li id="2"><a href="">Text 2</a></li> 
<li id="3"><a href="">Text 3</a></li> 

Ensuite, vous pouvez l'utiliser pour spécifier * e élément li en utilisant la valeur dans l'attribut id. Donc votre css devrait être

ul.list li[id="2"] a { background-color: #000; }