que - selectores css
¿Por qué un: hover es anulado en CSS? (2)
Hay un problema de orden, como se explica en W3Schools:
Nota: a: el vuelo estacionario DEBE venir después de: un enlace y un: visitado en la definición de CSS para que sea efectivo.
Nota: a: active DEBE venir después de: flotar en la definición de CSS para que sea efectivo.
Si tengo este CSS:
a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }
Los enlaces debajo de la ID siempre aparecen en negro al pasar el mouse. Soy consciente de que el uso de una identificación da una prioridad más alta, sin embargo, no estoy anulando el selector :hover , solo el selector de :link , por lo que no debería mostrarse el cursor en rojo?
La pseudoclase de :link aplica al enlace incluso cuando está sobre él. Como el estilo con el ID es más específico, anula a los demás.
La única razón por la que el :hover estilo de :hover anula el estilo de :link es que aparece más adelante en la hoja de estilos. Si los coloca en este orden:
a:hover { color: red; }
a:link { color: blue; }
el estilo de :link encuentra más adelante en la hoja de estilos y anula el :hover estilo de :hover . El enlace permanece azul cuando pasas el cursor sobre él.
Para que el estilo :hover funcione para el enlace negro, tiene que hacerlo al menos tan específico como el :link estilo de :link y colocarlo después en la hoja de estilos:
a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }
#someID a:hover { color: red; }