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   }
Inspector

Intentó.hud > .main > .button vs.hud > .main p

También probé.hud > .main > .button vs.hud > .main p:not(.botton)

Respuestas a la pregunta(1)

Su respuesta a la pregunta