css - cronometro - primefaces procesando

Diferencia entre ".class" y ".class,.class.class"?

Question

El siguiente extracto de la documentación de PrimeFaces lo hace parecer como si hubiera una diferencia entre los dos selectores descritos en el título:

.ui-widget, .ui-widget .ui-widget {
     font-size: 90% !important;
}

¿Puede alguien explicarme el significado del segundo selector (".ui-widget .ui-widget") para mí? Entiendo que coincide con los elementos de la clase "ui-widget" que son hijos de otros elementos de la misma clase, pero ¿ya no serían seleccionados por el primer selector?

Answer 1

Tenga en cuenta que estoy usando tamaños de letra ridículos en el ejemplo para facilitar las matemáticas.

Asumiendo que tienes un tamaño de fuente base de 100px.

HMTL

<div class="ui-widget">
    <div class="ui-widget"></div>
</div>

Si solo tuvieras la regla

.ui-widget { 
    font-size 90% !important; 
}

El .ui-widget padre tendría un tamaño de fuente de 90px (90% de 100px).
El .ui-widget hijo tendría un tamaño de fuente de 81 px (90% de 90 px).

Con la regla

.ui-widget, .ui-widget .ui-widget { 
    font-size 90% !important;
}

Tanto el .ui-widget padre como el hijo tendrían un tamaño de fuente de 90 px

Answer 2

cuando .ui-widget está en .ui-widget ( por lo que no hay un selector combinado ), entonces el tamaño de fuente sería 90% de 90% , con el selector .ui-widget .ui-widget , se establece inicialmente en 90% usando! importante

Esto hará dos cosas:

1. establecer el tamaño de fuente de los componentes con la clase ui-widget al 90% (del padre)
2. establecer el tamaño de fuente de los componentes con la clase ui-widget y son hijos de otro componente con la clase ui-widget al 90% (del padre)

la razón por la cual .ui-widget .ui-widget se requería en el CSS estándar era para evitar el problema inverso: el tamaño de fuente aumentaba en ui-widgets anidados.

Sin el estilo definido para .ui-widget .ui-widget , el estilo de fuente predeterminado: 90% de estilo aplicado a .ui-widget hace que el tamaño de fuente aumente en ui-widgets anidados.

Al agregar el selector .ui-widget .ui-widget más específico .ui-widget .ui-widget con un tamaño de fuente establecido en 90%, se asegurará de que obtenga un tamaño de letra constante, sin importar qué tan profundo anide sus componentes.

Answer 3

Editar : como @Robin Kanters y otros han señalado, existe una pequeña diferencia al agregar el selector de clase .class: especificidad. (Esto se puede ver aquí )

De lo contrario, el selector .class .class es redundante .

.ui-widget {
     font-size: 90% !important;
}

y

.ui-widget, .ui-widget .ui-widget {
     font-size: 90% !important;
}

producir los mismos resultados

VIOLÍN

Puede ver en el violín anterior que el selector .ui-widget individual es suficiente para producir la herencia recursiva del tamaño de fuente.

Answer 4

Es significativo En caso de que haya algunas otras reglas css definidas en algunos archivos css, puede que sea necesario anular esas reglas genéricas para elementos específicos. Considere este escenario.

Aquí, tenemos otra Div y otra regla css.

Vea esta demostración con .class.class y demo sin .class.class . En tales escenarios, tiene importancia. Para anular algunas otras reglas genéricas de css

<div class="ui-widget">
    single
</div>

<div class="ui-widget">
    parent
    <div class="ui-widget">
        child
    </div>
</div>

<div>
    <div class="ui-widget">
        child
    </div>
</div>

css

.ui-widget, .ui-widget .ui-widget {
     font-size: 150% !important;
}

div .ui-widget{
     font-size: 20% !important;
}