CSS-Selektor-Kaskadierung / Spezifität funktioniert nicht wie erwartet

Question

Jan 06, 2015, 07:12 PM

CSS-Selektor-Kaskadierung / Spezifität funktioniert nicht wie erwartet

Einzelheite

Ich arbeite in FirefoxDeveloperEdition und habe eine unerwartete Selektorpriorisierung. Ich habe das @ durchgelesSmashing Magazine article "CSS-Spezifität: Dinge, die Sie wissen sollten" und, soweit ich das beurteilen kann, die CSS-Selektoren so konstruiert haben, wie sie sein sollten, um das beabsichtigte Maß an Spezifität für jede zu erreichen. Die falsche Deklaration wird jedoch storniert.

Worum geht es hier? Habe ich mich nicht ganz mit den Funktionen der Selektor-Spezifität beschäftigt? Ist das ein Bug? Oder etwas anderes

Project Code (vereinfacht)

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

Inspekto

Tried.hud > .main > .button vs.hud > .main p

Auch versucht.hud > .main > .button vs.hud > .main p:not(.botton)