Sé selector CSS con la mayor especificidad tiene prioridad (es decir, .classname < #idname).

También sé que si las cosas son la misma especificidad, luego de la última declaración de la llama tiene prioridad:

.classname1 { color: red; }
.classname1 { color: blue; } //classname1 color will be blue

Hace el pedido de clases de HTML en un elemento de DOM afectan a la declaración de prioridad?

  • Se llama también clases de HTML, ya que tiene que definir clases en HTML, CSS no.

3 Comentarios

  1. 59

    Tengo que discrepar un poco con Jon y Watson respuestas, como…

    Sí, Puede (dependiendo de la instrucción)

    Su pregunta es:

    ¿ El orden de las clases CSS de un elemento de DOM afectan a la declaración de prioridad?

    Que no depende de la declaración en cuestión.

    HTML Pedidos Normalmente No Importa

    La siguiente son equivalentes cuando se trata de una recta llamada a una clase (es decir, .class1 o .class2) o a un combinado de la llamada (es decir, .class1.class2 o .class2.class1):

    <div class="class1 class2"></div>
    <div class="class2 class1"></div>

    Casos Donde la Declaración de Prioridad, por encima de HTML Pueden ser Afectados Basada en HTML Fin de

    El principal lugar donde se ordena en HTML que importa es con el uso de atributo selectores en CSS.

    Ejemplo 1 Violín utilizando el siguiente código busca partido valor de atributo NO tendrá ningún cambio en el color de la fuente, y cada div va tienen propiedades diferentes a causa de la orden de las clases:

    [class="class1"] {
        color: red;
    }
    
    [class="class1 class2"] {
        background-color: yellow;
    }
    
    [class="class2 class1"] {
        border: 1px solid blue;
    }

    Ejemplo 2 Violín utilizando el siguiente código busca partido principio de valor de atributo NO tendrá ningún cambio en el color de la fuente para el segundo div, y cada div va tienen propiedades diferentes a causa de la orden de las clases:

    [class^="class1"] {
        color: red;
    }
    
    [class^="class1 class2"] {
        background-color: yellow;
    }
    
    [class^="class2 class1"] {
        border: 1px solid blue;
    }

    Ejemplo 3 Violín utilizando el siguiente código busca partido final de valor de atributo NO tendrá ningún cambio en el color de la fuente para el primer div, y cada div va tienen propiedades diferentes a causa de la orden de las clases:

    [class$="class1"] {
        color: red;
    }
    
    [class$="class1 class2"] {
        background-color: yellow;
    }
    
    [class$="class2 class1"] {
        border: 1px solid blue;
    }

    Una Declaración aclaratoria acerca de «Prioridad»

    Para ser claros, en los casos mencionados, lo que se ve afectado ya que ahora como «declaración de prioridad» es realmente una cuestión de si la declaración realidad se aplica o no el elemento. Pero desde la aplicación o no es en un sentido, la prioridad básica, y desde los de arriba son los casos en que dicha aplicación se basa en realidad en el orden de las clases de en el Dom de HTML del elemento (en lugar de la presencia o ausencia de la clase), pensé que la pena añadir esto como una respuesta.

    Posible Uso Válido de la Clase de Pedido?

    Este es un pensamiento que a mí, basado en BoltClock del comentario. Considerar sólo dos clases que se utilizan para elementos de estilo basándose en los factores que se consideran fundamentales para diferentes estilos. Estas dos clases, teóricamente, puede reemplazar el uso de once diferentes clases individuales mediante la combinación de selectores de atributo (en realidad, como se podrá observar más adelante, las posibilidades son casi ilimitadas, pero de una sola clase, pero voy a discutir que en un momento dado que este post es sobre el pedido de varias clases). Para estas dos clases de podemos estilo de los elementos de forma diferente, como sigue:

    Asumiendo estas HTML Combinaciones

    <div class="class1">Element 1</div>
    <div class="class2">Element 2</div>
    <div class="class1 class2">Element 3</div>
    <div class="class2 class1">Element 4</div>

    CSS Posibilidades

    /* simply has the class */
    .class1 {} /* affects elements 1, 3, 4 */
    .class2 {} /* affects elements 2-4 */
    /* has only a single class */
    [class="class1"] {} /* affects element 1 only */
    [class="class2"] {} /* affects element 2 only */
    /* simply has both classes */
    .class1.class2 {} /* affects elements 3-4 */
    /* has both classes, but in a particular order */
    [class="class1 class2"] {} /* affects element 3 only */
    [class="class2 class1"] {} /* affects element 4 only */
    /* begins with a class */
    [class^="class1"] {} /* affects elements 1 & 3 only */
    [class^="class2"] {} /* affects elements 2 & 4 only */
    /* ends with a class 
       NOTE: that with only two classes, this is the reverse of the above and is somewhat
       superfluous; however, if a third class is introduced, then the beginning and ending 
       class combinations become more relevant.
    */
    [class$="class1"] {} /* affects elements 2 & 4 only */
    [class$="class2"] {} /* affects elements 1 & 3 only */

    Si puedo calcular la derecha, 3 clases podría dar al menos 40 combinaciones de selector de opciones.

    Para aclarar mi nota sobre «sin límites» de posibilidades, dado el derecho de la lógica, de una sola clase puede potencialmente tener incrustada código de combinaciones que se buscan a través de la [attr*=value] sintaxis.

    Es todo esto demasiado complejo para gestionar? Posiblemente. Que puede depender de la lógica de exactamente cómo se implementa. El punto que estoy tratando de llevar a cabo, es que es posible con CSS3 para tener orden de las clases de ser significativo si uno deseado y planeado, y no podría ser de horriblemente mal utilizando el poder de CSS de esa manera.

    • Por supuesto, cabe señalar que si uno tiene que utilizar los selectores de atributo de estilo basado en la class atributo, entonces algo, en algún lugar, es horriblemente mal con el código.
    • no necesariamente. Concedo que es (y debe ser) una cosa rara. Pero, por ejemplo, el estilo algo si solo ha class1 y no de otras clases en que sería un uso adecuado. También, en la manera de pensar acerca de la respuesta a esta pregunta, se me había pensando en cómo la clase de pedido tal vez puede ser utiliza para reducir el tamaño del código de html mediante la aplicación de estilo de toma de pedidos en consideración. Creo que voy a trabajar hasta una edición para explicar que la idea más allá.
    • Realmente se usa en la Semántica de la interfaz de usuario el sistema de la red: semantic-ui.com/collections/grid.html#manual-tweaks
    • Estoy realmente curioso ahora si alguno de los HTML DOM o especificaciones de estado que el orden de los nombres de las clases se conserva/garantizado, porque de lo contrario no me puedo imaginar cómo algo así como la Semántica de interfaz de usuario puede confiar en ella (y es la razón por la que he publicado mi comentario original – no estoy en desacuerdo con Scott sentimiento en su uso para que coincida con los elementos que tienen un nombre de clase).
    • Sí, me acabo de enterar de que la Semántica hizo lo mismo esta mañana. Yo no tenía ni idea de que era posible. En el caso de la Semántica, que están usando un sistema como tal: <div class="six wide tablet eight wide computer column"></div>. Esencialmente, este código es interpretado como six wide tablet y eight wide computer que es específico a dos consultas de medios CSS. Este se calcula como sigue: .ui.grid > [class*="eight wide computer"].column { width: 50% !important; }.
    • Que usted puede no significa que usted debe, ni siquiera para salvar algunas líneas de código. Dependiendo de la clase de ordenar parece mala medicina. Alguien (tal vez!) va a cambiar su orden algún día y ser difícil de averiguar qué ha ido mal. Incluso, dependiendo no solo de la clase parece una mala idea. Hay casi seguramente una mejor manera en el 99% de los casos.
    • Incluso para utilidad de la primera marcado que no tiene pruebas de forzar un orden específico, porque ya se ha descrito con compilado de CSS. Utilidad-primer estilo hace que sea básico. Semánticamente clases de utilidad debe ser colocado después de la componente queridos para mejorar la legibilidad, por lo que esta orden también es una buena regla para class atributo en el marcado.

  2. 9

    No, no, como usted dijo, si dos reglas tienen la misma especificidad, la que viene más adelante en el CSS va a ser aplicado.

Dejar respuesta

Please enter your comment!
Please enter your name here