Especificidad de los selectores CSS anidados

Question

Apr 05, 2016, 02:16 PM

Especificidad de los selectores CSS anidados

Estoy tratando de averiguar por qué "Item One" no se muestra como naranja, a continuación. De acuerdo con las reglas de especificidad, el selector.one.two, debe tener un puntaje de especificidad de 20 (dos clases)..one li debe tener 11 (una clase, un elemento). Entonces parece que debería mostrarse como naranja, no azul.

¿Alguna idea de por qué no?

Además, como pregunta adicional, ¿por qué no puedo tener un espacio entre.one y el.two en el.one.two ¿selector? Parece que funciona para Chrome, pero noaquí.

Enlace a cálculos de especificidad.

<!DOCTYPE html>
<html>

<head>
  <style>
    .one {
      color: red;
    }
    .two {
      color: green;
    }
    .one li {
      color: blue;
    }
    .one.two {
      color: orange;
    }
  </style>
</head>

<body>
  <div>
    <ul class="one two">
      <li>Item One</li>
    </ul>
  </div>
</body>

</html>

Deja tu comentario