El selector de CSS en cascada / especificidad no funciona como se esperaba
Detalles
Estoy trabajando en FirefoxDeveloperEdition y estoy experimentando una priorización de selector inesperada. He leído elRevista sensacional artículo "Especificidad CSS: cosas que debe saber" y, por lo que puedo decir, he construido los selectores CSS como deberían para lograr el nivel de especificidad previsto para cada uno. Sin embargo, se está cancelando la declaración incorrecta.
¿Cuál es el problema aquí? ¿No he terminado de entender el funcionamiento de la especificidad del selector? ¿Es esto un error? ¿O algo mas?
Código de proyecto (simplificado)/index.html
<head>
<link href="css/style.css">
</head>
<body>
<section class="hud">
<section class="main float-l">
<a href="#0" class="button">
<div class="outer container">
<div class="inner container">
<p class="show"> <!-- This text is meant to be white by the style declared at line 159. But, it's grey by line 61. -->
View Details
</p>
<div class="arrow"></div>
<p class="hide"> <!-- This text is meant to be white by the style declared at line 159. But, it's grey by line 61. -->
Hide Details
</p>
</div>
</div>
</a>
</section>
</section>
</body>
/css/style.css
58 .hud > .main p /* I also tried `.hud > .main p:not(.button)` */
59 {
60 vertical-align: middle;
61 color: #7C7C7C; /* This grey is applied of the white of line 159. */
62 {
...
155 .hud > .main > .button
156 {
157 display: block;
158 background-color: #986B99;
159 color: #FFFFFF; /* This white should be applied, but is overridden by the grey of line 61. */
160 height: 36px;
161 margin: 20px 10px 10px;
162 padding: 8px 20px;
163 font-weight: 400;
164 text-decoration: none;
165 text-transform: uppercase;
166 border-radius: 2px;
167 }
Intentó.hud > .main > .button vs.hud > .main p
También probé.hud > .main > .button vs.hud > .main p:not(.botton)