Diferencia entre "#someid ul li.someclass a" y "#someid ul li .someclass a"? (observe el espacio en blanco)

Question

No tengo muchas experiencias en CSS, pero recientemente descubrí que hay una diferencia entre tener un espacio en blanco antes de un selector de clase y sin tener uno. Hasta ahora, solo sé que se interpretan como dos cosas diferentes ... ¿Alguien con experiencia en CSS me puede explicar cuál es la diferencia particular? ¿Esto también se aplica al selector de ids?

Gracias. aprecia tus respuestas

Answer 1

#someid ul li.someclass a significa

anclas que son descendientes de artículos
lista que tienen la clase someclass y son a su vez descendientes de
listas desordenadas que son descendientes de
el elemento con el ID someid.

#someid ul li .someclass a significa

anclas que son descendientes de
los elementos que tienen la clase someclass y ellos mismos son descendientes de
elementos de la lista que son descendientes de
listas desordenadas que son descendientes de
elemento con ID someid.

Por lo tanto, el elemento <a> en el siguiente marcado se corresponde con la primera regla, pero no por el segundo:

<div id="someid"> 
    <ul> 
     <li class="someclass"> 
      <a href="foo.html" /> 
     </li> 
    </ul> 
</div> 

Y el elemento <a> en el siguiente marcado se corresponde con la segunda regla, pero no por los primeros:

<div id="someid"> 
    <ul> 
     <li> 
      <span class="someclass"> 
       <a href="foo.html" /> 
      </span> 
     </li> 
    </ul> 
</div> 

Answer 2

Dos ejemplos:

#someid ul li.someclass a golpeará la etiqueta de anclaje en este ejemplo

<div id="someid"> 
    <ul> 
    <li class="someclass"> 
     <a href="http://www.example.com">link</a> 
    </li> 
    </ul> 
</div> 

#someid ul li .someclass a llegará a la etiqueta de anclaje en este ejemplo

<div id="someid"> 
    <ul> 
    <li> 
     <div class="someclass"> 
     <a href="http://www.example.com">link</a> 
     </div> 
    </li> 
    </ul> 
</div> 

Observe también que este llegará a dos de ellos:

<div id="someid"> 
    <ul> 
    <li class="someclass"> 
     <div class="someclass"> 
     <a href="http://www.example.com">link</a> 
     </div> 
    </li> 
    </ul> 
</div>