Sélecteurs CSS ul li A { ... } vs ul > li> a {…}

ul>li sélectionne tous les li qui est directement à l'enfant de ul alors que ul li sélectionne tous les li qui sont n'importe où à l'intérieur (descendant aussi profond que vous le souhaitez) a ul

pour HTML:

<ul>
  <li><span><a href='#'>Something</a></span></li>
  <li><a href='#'>or Other</a></li>
</ul>

et CSS:

li a{ color: green; }
li>a{ color: red; }

La couleur de Something reste vert mais or Other rouge

Partie 2, vous devez écrire la règle pour être adaptée à la situation, je pense que la différence de vitesse serait incroyablement petit, et probablement éclipsé par le surplus de personnages impliqués dans l'écriture du code, et certainement éclipsé par le temps pris par le développeur pour y réfléchir.

Cependant, en règle générale, plus vous êtes précis avec vos règles, plus les moteurs CSS peuvent localiser rapidement les éléments DOM que vous voulez appliquer, donc j'attends li>a est plus rapide que li a comme la recherche DOM peut être raccourcie plus tôt. Cela signifie également que les ancres imbriquées ne sont pas coiffées avec cette règle, est que ce que que voulez-vous? question beaucoup plus pertinente.

ul > li > a ne sélectionne que les enfants directs. Dans ce cas, seul le premier niveau <a> de premier niveau <li> à l'intérieur du <ul> sera sélectionné.

ul li a d'un autre côté va sélectionner tout <a> - s en tout <li>-s dans la liste non ordonnée

Exemple ul > li

ul > li.bg {
  background: red;
}

<ul>
  <li class="bg">affected</li>
  <li class="bg">affected</li>    
  <li>
    <ol>
      <li class="bg">NOT affected</li>
      <li class="bg">NOT affected</li>
    </ol>
  </li>
</ul>

si vous utilisez ul li -li - s seraient affectés

UPDATE le l'ordre des sélecteurs CSS plus ou moins efficaces va ainsi:

• ID, e.g.#header
• Classe, par exemple,.promo
• Type, comme par exemple div
• fratrie adjacente, p.ex. h2 + p
• Enfant, par exemple,li > ul
• Descendant, par exemple,ul a
• Universel, c'est à dire *
• l'Attribut, par exemple,[type="text"]
• Pseudo-classes / - éléments, p.ex. a:hover

Donc votre meilleur pari est d'utiliser le children sélectionner au lieu de juste descendant. Toutefois, la différence sur une page régulière (sans dizaines de milliers d'éléments à parcourir) pourrait être absolument négligeable.

1) par exemple code HTML:

<ul>
    <li>
        <a href="#">firstlink</a>
        <span><a href="#">second link&lt;/a>
    </li>
</ul>

et les règles css:

1) ul li a {color:red;} 
2) ul > li > a {color:blue;}

"> " - le symbole signifie que l'on recherche seulement le sélecteur d'enfant (parentTag > childTag)

ainsi la première règle css s'appliquera à tous les liens (premier et deuxième) et la deuxième règle s'appliquera anly au premier lien

2) quant à l'efficacité - je pense que la seconde sera plus rapide - comme dans le cas des sélecteurs JavaScript. Cette règle lu de droite à gauche, cela signifie que lorsque la règle analyser par navigateur, il obtenir tous les liens sur la page: - dans le premier cas, il trouvera tous les éléments de parent pour chaque lien sur la page et filtrer tous les liens où existent les étiquettes de parent "ul" et " li" - dans le second cas, il vérifiera seulement le noeud parent du lien si c'est la balise "li" alors - > vérifiez si la balise parent de "li" est "ul"

quelque chose comme ça. Espérons que je décris toutes les correctement pour vous

pour répondre à votre deuxième question - la performance EST affectée, si vous utilisez ces sélecteurs avec un seul (pas imbriquée) ul:

<ul>
    <li>jjj</li>
    <li>jjj</li>    
    <li>jjj</li>
</ul>

le sélecteur d'enfant ul > li est plus performant que ul li parce qu'il est plus spécifique. le navigateur traverse le dom "de droite à gauche", donc quand il trouve un li il cherche alors un tout ul en tant que parent dans le cas d'un sélecteur d'enfant, alors qu'il traverse l'ensemble de l'arborescence du dom pour trouver tout ul les ancêtres dans le cas du sélecteur de descendant