html - para - firefox quantum: developer edition
El atributo de color CSS ganador no coincide con el resultado (2)
Observación interesante! Parece que las herramientas para desarrolladores de Firefox usan el número de línea del bloque de declaración para determinar la importancia del selector, cuando la especificidad de dos selectores es la misma.
Sin embargo, esto puede ser un problema cuando se minimiza el archivo CSS y todos los bloques de declaración terminan en la misma línea.
Se vuelve más evidente si usa el recurso no minificado:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
Un JSFiddle con el CSS minimizado presenta este problema, pero no uno que usa CSS completamente expandido .
Espero que esto arroje algo de luz sobre el tema. Tal vez vale la pena un informe de error?
EDITAR: Un poco más de prueba indica que las herramientas de Firefox tienen precedencia en el bloque de la izquierda cuando se enfrentan con múltiples selectores de misma especificidad en una sola línea. ( Un ejemplo )
Estoy viendo un extraño escenario donde, de acuerdo con la consola de desarrollo de Firefox, el color coincidente para un elemento CSS es diferente de la salida visible. Si es importante, estoy usando Bootstrap 3 como fuente de estilo. Aquí está el archivo HTML (muy corto) que estoy usando para el ejemplo.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<button class="form-control btn btn-success">Hello world</button>
Aquí hay una captura de pantalla de la consola de desarrollo de Firefox con la supuesta regla de "ganar" css para:
Y aquí hay una captura de pantalla de la representación del navegador real:
Como puede ver, el texto en el botón se representa como blanco. Desde la parte superior de las reglas de CSS, parece que el blanco fue, de hecho, seleccionado. Pero no está claro de dónde viene eso. La única regla que dice "es blanca (#FFF)" está tachada, y la única regla que no está tachada dice "es gris oscuro (# 555)". Entonces, ¿por qué el texto es blanco?
Sí, eso es raro, pero si miras bajo el inspector, veo lo que esperas: ¿debe haber un error con las herramientas de desarrollo de Firefox?