Diferencia entre".clase" y ".clase,.clase.clase"?

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

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

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

Author: BoltClock, 2014-01-28
Source

4 answers

Editar : Como @Robin Kanters y otros han señalado, hay una pequeña diferencia con la adición de la .clase .selector de clase - especificidad. (Esto se puede ver aquí)

De lo contrario, el.clase .el selector de clase es redundante.

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

Y 

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

Producen los mismos resultados.

FIDDLE

Se puede ver en el violín anterior que el single .ui-widget selector es suficiente para producir el recursivo herencia del tamaño de fuente.

 7
Author: Danield,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-28 16:19:41

Cuando .ui-widget está en .ui-widget (así que no hay 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: {[13]]}

  1. establezca el tamaño de fuente de los componentes con la clase ui-widget en 90% (de el padre)
  2. establece 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% (de el padre)

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

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

Al agregar el selector más específico .ui-widget .ui-widget con el tamaño de fuente establecido en 90%, se asegurará de obtener un tamaño de fuente consistente, sin importar cuán profundo anide sus componentes.

 17
Author: Mark,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-28 14:18:12

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

Aquí, tenemos otro Div y otra regla css.

Ver esto demostración con .clase.clase y demo sin .clase.clase. En tales escenarios tiene importancia. Para anular algunas otras reglas css genéricas

<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;
}
 15
Author: sree,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-29 04:32:50

Tenga en cuenta que estoy usando tamaños de fuente ridículos en el ejemplo para hacer las matemáticas más fáciles.

Así que suponiendo que tuviera 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 padre .ui-widget tendría un tamaño de fuente de 90px (90% de 100px).
Niño .ui-widget tendría un tamaño de fuente de 81px (90% de 90px).

Con la regla 

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

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

 2
Author: Martin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-28 10:25:40