Sobrescribir los selectores de clase CSS sin! Important

Question

Estoy escribiendo un diálogo de IU de JavaScript para una aplicación web. El problema es que los usuarios pueden crear sus propios temas para la aplicación web, que pueden incluir selectores de elemento CSS (h1 {...}, div {...}, etc.) que sobrescriben el formato de mi css para el cuadro de diálogo de la interfaz de usuario. El diálogo es un elemento div que está formateado sobre un selector de clase (la dosis id no funciona porque este diálogo puede aparecer varias veces). ¿Hay alguna forma de detener el selector de elementos del estilo de plantilla de usuario que afecta al diálogo de UI, sin tener que usar un gran estilo de restablecimiento de CSS y utilizando !important para cada estilo del diálogo de UI? ¿De qué manera las bibliotecas de IU como la interfaz de usuario jQuery diseñan cuadros de diálogo?

Por ejemplo el tema de usuario incluye:

input {color:nuts; height:bananas; width:crazy; background:morenuts; } 

css de la interfaz de usuario:

.ui_modal_wrap input {color:red; border:1px solid black;} 

HTML de la interfaz de usuario:

<div class="ui_modal_wrap> 
<input type="text" name="#" /> 
</div> 

problema sigue siendo que tengo que usar una gran css rest for .ui_modal_wrap porque no se puede escribir css con todos los atributos que un usuario podría aplicar (en este ejemplo) el elemento de alto y ancho aún rompería el diseño porque la dosis de UI no incluye la altura y el ancho).

Answer 1

En general, debe saber que las reglas se aplican (si ambas están en hojas de estilo externas) con specificity rules.

En general, hay una puntuación que puede considerar, y se aplicará la regla que se aplica al elemento que tenga la puntuación más alta.

En una cadena de selector, cada tipo de elemento vale uno, las clases valen 10, y una identificación vale 100 puntos.

body div.wrapper == 12 points

body div.wrapper div span == 14 points

body #quote == 101 points

Así que en general, sólo hace las reglas específicos de la página (que el estilo del resto de la página) menos específicos, y dejar que el CSS interfaz de usuario se haga cargo. Alternativamente siempre se puede poner el marcado de la interfaz de usuario dentro de un bit de "super" de HTML, como:

<div id="super"> 
    <div id="super2"> 
     //your UI stuff 
    </div> 
</div> 

Y a continuación, "nombre" del CSS para la interfaz de usuario, poniendo #super #super2 antes de cada regla en esa hoja de estilo.

Answer 2

No hay manera de asegurar esto en absoluto a menos que:

1. se puede filtrar CSS del usuario y eliminar todas las declaraciones importantes
2. se le garantiza que el código CSS se inserta después de ellos!. Entonces puede usar! Importante en todo para garantizar que su CSS tenga una especificidad mayor.

leer css specificity

Answer 3

Usted tendrá que tener un segundo conjunto de estilos que utilizan selectores más específicos, que anularán los elementos establecidos por los estilos del usuario. Usar !important es solo una forma de hacerlo.Consulte Especificidad de CSS para obtener más información.

HTML

<div class="ui-dialog"> 
    <h1>Dialog Heading</h1> 
</div> 

CSS:

div.ui-dialog h1 { 
    color: red; 
} 

jQuery UI implementar este le proporciona la opción de especificar 'alcance' un CSS cuando se utiliza el rodillo de Tema. Puede establecer el alcance en .system-scope y luego en su HTML ajustar todos los elementos de la IU en un elemento con una clase de ámbito del sistema.