la clase invalida cuando dos clases se asignan a un div

Estaba creando una <div>etiqueta en la que quería aplicar dos clases para una <div>etiqueta que sería una galería de miniaturas. Una clase por su posición y la otra clase por su estilo. De esta manera pude aplicar el estilo, estaba teniendo unos resultados extraños que me llevaron a una pregunta.

¿Se pueden asignar dos clases a una <div>etiqueta? Si es así, ¿cuál prevalece sobre el otro o cuál tiene prioridad?

Se pueden asignar varias clases a un div. Simplemente sepárelos en el nombre de la clase con espacios como este:

<div class="rule1 rule2 rule3">Content</div>

Esta div A continuación, se han encontrado las reglas de estilo para los tres selectores de clase diferentes: .rule1, .rule2y .rule3.

Las reglas de CSS se aplican a los objetos en la página que coinciden con sus selectores en el orden en que se encuentran en la hoja de estilo y si hay un conflicto entre dos reglas (más de una regla tratando de establecer el mismo atributo), entonces la especificidad de CSS determina cuál la regla tiene prioridad.

Si la especificidad de CSS es la misma para las reglas en conflicto, entonces la última (la definida más adelante en la hoja de estilo o en la hoja de estilo posterior) tiene prioridad. El orden de los nombres de las clases en el objeto en sí no importa. Es el orden de las reglas de estilo en la hoja de estilo lo que importa si la especificidad de CSS es la misma.

Entonces, si tuvieras estilos como este:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Luego, dado que ambas reglas coinciden con el div y tienen exactamente la misma especificidad de CSS, la segunda regla viene después, por lo que tendría prioridad y el fondo sería rojo.

Si una regla tiene una especificidad CSS más alta ( div.rule1puntuaciones más altas que .rule2):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Entonces, tendría prioridad y el color de fondo aquí sería verde.

Si las dos reglas no entran en conflicto:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

Entonces, se aplicarán ambas reglas.

En realidad, la clase que se definió en último lugar en el CSS se aplica en su div.

Echale un vistazo:

rojo último en css

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

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

vs

azul último en css

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

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

Si pregunta si tienen la misma propiedad, de acuerdo con la regla CSS, tome la última declaración.

<div class="red green"></div>

CSS

.red{
 color:red;
}
.green{
 color:green;
}

Según el ejemplo anterior, se toma la última declaración según el árbol css, que es .green .

La clase que se define en último lugar en el CSS tiene prioridad, si no se aplica nada más.

Lea sobre la prioridad de CSS para ver cómo funciona.

Se pueden asignar muchas clases a un elemento, simplemente sepárelas con un espacio

<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>

Debido a la cascada en CSS, las reglas de sobrescritura más cercanas al final del documento se aplicarán al elemento.

Así que si tienes

.myClass
{
    background: white;
    color: blue;
}

.keepOnClassing
{
    color: red;
}

Se utilizará el color rojo, pero no el color de fondo, ya que no se sobrescribió.

También debes tener en cuenta la especificidad de CSS, si tienes un selector más específico, se utilizará este:

.myClass
{
    background: white;
    color: blue;
}

div.myClass.keepOnClassing
{
    background: purple;
    color: red;
}

.stayClassySanDiego
{
    background: black;
}

El segundo selector aquí se utilizará ya que es más específico.

Puedes echarle un vistazo a todo aquí .