reglas - selectores css avanzados

Usando múltiples clases en un elemento y especificidad.

Question

Solo me pregunto cuándo utilizas varias clases en un elemento como class="foo bar" y esas clases se configuran como se muestra a continuación:

.foo {
    margin-right: 10px;
}


.bar {
    margin-right: 0px;
}

¿Qué clase tendrá especificidad? ¿El margen será 10px o 0px?

Answer 1

Además, si desea apuntar al elemento que tiene solo ambas clases, puede usar esta sintaxis:

<ul>
  <li class="foo first">Something</li>
  <li class="foo">Somthing else</li>
  <li class="foo">Something more</li>
</ul>

.foo {
  color: red;
}
.foo.first {
  color: blue
}

Answer 2

Además, una clase más "específica" anulará una más genérica:

HTML:

<div class="foo">
    <div class="bar">Hello World!</div>
</div>

Con el siguiente CSS:

.foo .bar { margin-left:25px }
.bar { margin-left:0px }

¿Observa cómo la división interna todavía tiene un margen de 25 px a la izquierda?

Además, lea el argumento "! Important" después de proporcionar el valor:

.bar { margin-left:0px!important }

Revisa

Answer 3

Funciona en base a la precedencia dentro del CSS. Por lo tanto, el elemento que se produzca más recientemente anulará cualquier estilo anterior.

CASO 1

.foo  { background : red; }
.bar  { background : blue; }

class = ''foo bar'' sería azul en este caso.

CASO 2

.bar  { background : blue; }
.foo  { background : red; } 

class = ''foo bar'' sería rojo en este caso.

Ejemplo de trabajo

Answer 4

Un solo nombre de clase tiene el mismo peso. En tal escenario, la regla que se enumera primero será sobrescrita por la segunda, y por lo tanto, el elemento tendrá un margin-right: 0px;

Aquí hay un ejemplo simple que usa color lugar de margen, porque es más fácil de visualizar. El valor especificado en la bar será elegido por el navegador.