paginas - Cómo detener las hojas de estilo del agente de usuario para que no reemplacen mi CSS
etiquetas css (4)
El "problema" aquí es que en realidad no hay input estilo de input en la hoja de estilo del autor (consulte la especificación para obtener más información) y, por lo tanto, se utiliza el estilo que se define en la hoja de estilo del agente del usuario.
La regla del agente de usuario (relevante) (en Chrome) es:
input, input[type="password"], input[type="search"] {
cursor: auto;
}
Puedes lograr lo que quieres de dos maneras:
- Cree una clase css que seleccione la entrada directamente, por ejemplo
- usando otra clase css, o
- seleccionando la entrada dentro de la clase ya definida,
- etc
- Establecer explícitamente el comportamiento de herencia para el estilo del cursor en todas las entradas
Para 1):
<style>
.a, .a input {
cursor: pointer;
}
</style>
Para 2):
<style>
input {
cursor: inherit;
}
.a {
cursor: pointer;
}
</style>
Estoy tratando de establecer el cursor: puntero en un elemento dom, pero la entrada no lo está tomando (no estoy viendo un puntero cuando pasé el cursor sobre la casilla de verificación). En Chrome, veo que la "hoja de estilo del agente de usuario" está anulando mi CSS. Wtf?
<!doctype html>
<body>
<div class=''a''>
<input type=''checkbox''>
</div>
<style>
.a {
cursor: pointer;
}
</style>
</body>
He visto esta pregunta: ¿Por qué la hoja de estilo del agente de usuario reemplaza mis estilos? Pero mi problema no parece ser el doctype, que es el tipo de documento recomendado .
El uso de !important no es aceptable aquí, y tampoco es el estilo del nodo de entrada directamente. No debería tener que preocuparme por los estilos extraños de navegador useragent. ¿Que esta pasando?
Para aclarar, mi pregunta es sobre por qué la hoja de estilo del agente de usuario está anulando el CSS y cómo detenerlo. Mi pregunta no es cómo puedo hackear este comportamiento. Si no me equivoco, el comportamiento correcto de css es que el estilo del cursor debe ser heredado por los nodos secundarios.
¿Es este el comportamiento esperado de css?
Parece que esto podría ser simplemente css being css, lo cual es desafortunado. La solución más general que se me ocurre es definir este CSS:
<style>
input {
cursor: inherit;
}
</style>
Esto permite el comportamiento que originalmente esperaba que sucediera en todos los casos en que el agente de usuario de otro modo causaría que el estilo no herede. Esto es mejor que diseñar la entrada con "cursor: puntero" directamente porque solo tiene que configurar este estilo una vez, y cualquier domNodes con un estilo de "cursor: puntero" que contenga una entrada tendrá automáticamente la entrada con un cursor de puntero.
Pensé que tenía este problema y revisé los sospechosos habituales, Doctype, etc. Tan ridículo como suena, resultó que el estilo que pensé que se estaba aplicando estaba comentado en el CSS. Sin embargo, Chrome muestra el estilo como si fuera un estilo real y se reemplaza.
Respondiendo a esta pregunta en general, al elaborar la explicación que diría, el valor final de la propiedad CSS es un cálculo de cuatro pasos (es decir, especificación, computada, usada y real) de acuerdo con this publicación.
En la especificación, la conexión en cascada tiene prioridad sobre la herencia .
Dado que no tiene ninguna propiedad css de entrada, la hoja de estilo del agente de usuario aplicada a la entrada tiene prioridad sobre el valor heredado de la clase a. Para usar el valor heredado, debe anular el uso del código como lo sugiere @B T. ie.
<style>
input {
cursor: inherit;
}
</style>
Explicación de Cascading:
Breve explicacion
Explicación detallada
Me estoy refiriendo a la explicación detallada aquí -
Hay tres conceptos principales que controlan el orden en que se aplican las declaraciones de CSS:
- Importancia
- Especificidad
- Orden de la fuente
La importancia de una declaración de CSS depende de dónde se especifique. Las declaraciones en conflicto se aplicarán en el siguiente orden; los posteriores anularán los anteriores:
- Hojas de estilo de agente de usuario
- Declaraciones normales en hojas de estilo de usuario
- Declaraciones normales en hojas de estilo de autor
- Declaraciones importantes en hojas de estilo de autor
- Declaraciones importantes en hojas de estilo de usuario
la especificidad y el orden de la fuente no son relevantes para esta pregunta, puede referirse a las referencias anteriores para la explicación de la misma
En el código anterior, ya que solo tiene una hoja de estilo de agente de usuario delimitada directamente por el elemento, por lo tanto, tiene prioridad.
En pocas palabras, la herencia <cascading <importance <user stylesheet es el orden de prioridad en su caso.