Y a-t-il une différence entre ces deux sélecteurs CSS ?

Question

Les sélecteurs CSS suivants sélectionneraient-ils les mêmes éléments ?

ul > li[class="a"]  {  }

vs

ul > li.a

Answer 1

Les sélecteurs CSS suivants sélectionneraient-ils les mêmes éléments ?

Non ils ne le font pas. Remarquez comment, dans l'exemple ci-dessous, le dernier élément n'est pas sélectionné par l'option ul>li[class="a"] car ce sélecteur sélectionnera les éléments ayant seulement a en tant que classe.

 ul>li.a {
  color: red;
}

 ul>li[class="a"] {
  font-size: 30px;;
}

 <ul>
    <li class="a">Item 1</li>
    <li>Item 2</li>
    <li class="a b">Item 3</li>
  </ul>

Même les espaces blancs comptent :

ul>li.a {
  color: red;
}

 ul>li[class="a"] {
  font-size: 30px;;
}

<ul>
    <li class="a">Item 1</li>
    <li>Item 2</li>
    <li class="a b">Item 3</li>
    <li class="a ">Item 3</li>
  </ul>

Answer 2

Les deux sélecteurs fonctionnent de la même manière :

#one ul>li.a {
  color: red;
}

#two ul>li[class="a"] {
  color: orange;
}

<div id="one">
  <ul>
    <li class="a">Item 1</li>
    <li>Item 2</li>
    <li class="a">Item 3</li>
  </ul>
</div>
<div id="two">
  <ul>
    <li class="a">Item 1</li>
    <li>Item 2</li>
    <li class="a">Item 3</li>
  </ul>
</div>