Fue crear una <div> etiqueta en la que he querido aplicar dos clases para un <div> etiqueta que sería una galería de imágenes en miniatura. Una clase para su posición y la otra clase para su estilo. De esta forma, se podría aplicar el estilo, yo estaba teniendo algunos resultados extraños que me llevaron a una pregunta.

Dos clases de ser asignado a un <div> etiqueta? Si es así, que uno prevalece sobre el otro, o que uno tiene la prioridad?

5 Comentarios

  1. 115

    Varias clases pueden ser asignados a un div. Sólo les separan en el nombre de la clase con espacios como este:

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

    Este div, a continuación, coincide con ninguna de las reglas de estilo para tres diferentes selectores de clase: .rule1, .rule2 y .rule3.

    Reglas CSS que se aplican a los objetos en la página que coincidan 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 que la regla tiene prioridad.

    Si la especificidad de CSS es el mismo para las reglas en conflicto, luego que la tarde (el que se define más adelante en la hoja de estilos o en el posterior de la hoja de estilos) tiene prioridad. El orden de los nombres de clase en el objeto en sí no importa. Es el orden de las reglas de estilo en la hoja de estilo que importa si la especificidad de CSS es la misma.

    Así que si usted tiene estilos como este:

    .rule1 {
        background-color: green;
    }
    
    .rule2 {
        background-color: red;
    }

    Entonces, ya que ambas normas coinciden con el div y tienen exactamente la misma especificidad de CSS, a continuación, la segunda regla viene más tarde, por lo que tendría precedencia y el fondo de color rojo.


    Si una regla tenían una mayor especificidad de CSS (div.rule1 puntajes más altos de .rule2):

    div.rule1 {
        background-color: green;
    }
    
    .rule2 {
        background-color: red;
    }

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


    Si las dos normas no entran en conflicto:

    .rule1 {
        background-color: green;
    }
    
    .rule2 {
        margin-top: 50px;
    }

    Entonces, ambas reglas se aplicarán.

    • +1 Otro gran vínculo que explica la especificidad de CSS: maxdesign.com.au/artículos/css-cascada
    • la respuesta creo que es más correcto, si no me equivoco?
    • Respuesta a la que crees que es más correcta y por qué? Hay muchas respuestas «de abajo», así que no sé cuál es el que usted se refiere y no sé por qué usted piensa que es «más correcta». Estoy feliz de mejorar o aclarar mi respuesta, si usted puede explicar sus pensamientos.
    • jfriend00: la respuesta de @erez-sason a continuación es la que se refiere. Esto es extraño porque yo pensaba que funcionaba como usted ha señalado, pero sus ejemplos claramente el trabajo de la forma en que describe. Me pregunto si hay una distinción entre los estilos incrustados y vinculado estilos.
    • Mi respuesta ya que contiene la información de la respuesta como uno de los ejemplos que me proporcione: Entonces, ya que ambas normas coinciden con el div y tienen exactamente la misma especificidad de CSS, a continuación, la segunda regla viene más tarde, por lo que tendría precedencia y el fondo de color rojo.. Me muestran varios escenarios posibles y explicar a todos, no sólo de un escenario. El OP no era específico con su código así que me fui para la explicación general que abarca múltiples opciones e incluye la opción más sencilla.
    • Tienes toda la razón, yo era claramente de la lectura de un conflicto donde no hay ninguna. Lo siento

  2. 22

    Realidad, la clase que define el último en el css se aplica en su div.

    check it out:

    rojo última en css

    CSS:

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

    HTML:

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

    vs

    azul últimos en css

    CSS:

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

    HTML:

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

  3. 4

    Si usted preguntando acerca de ellos tienen la misma propiedad, a continuación, según la regla CSS es tomar la última instrucción.

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

    CSS

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

    Como por el ejemplo anterior es tomar la última instrucción como por css árbol que está .verde.

  4. 3

    La clase que se ha definido el último en el CSS tiene prioridad, si nada más se aplica.

    Leer sobre CSS prioridad para ver cómo funciona.

    • A qué te refieres físicamente último en el CSS real en sí, o el último nombre de la clase en la lista?
    • Que significa en realidad el último en la lista de todas las reglas CSS definidas en todas partes, no el orden en la lista de atributos, por desgracia para aquellos que utilizan el JavaScript classList métodos, que van a encontrar de esta decisión de diseño sorprendente e ineficiente, en mi opinión.
  5. 2

    Muchas clases puede ser asignado a un elemento, sólo les separan con un espacio

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

    Porque de la cascada en CSS, la sobreescritura reglas más cercano a la parte inferior del documento se aplican al elemento.

    Así que si usted tiene

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

    El color rojo va a ser utilizado, pero no el color de fondo como fue no se sobrescriben.

    Usted debe también tomar en cuenta la especificidad de CSS, si usted tiene más específica selector, esto va a ser utilizado:

    .myClass
    {
        background: white;
        color: blue;
    }
    
    div.myClass.keepOnClassing
    {
        background: purple;
        color: red;
    }
    
    .stayClassySanDiego
    {
        background: black;
    }

    El segundo selector de aquí se utilizará como es más específico.

    Usted puede tomar un mira todo aquí.

    • Upvoted para el mejor nombre de la clase de todos los tiempos (así como ser completa y exacta)

Dejar respuesta

Please enter your comment!
Please enter your name here