Какой CSS Cassade имеет распространенность в этом случае и почему? [дублировать] ⇐ CSS

[Anonymous]

При выполнении этого экземпляра я пришел к идее «оптимизировать» код, пытаясь избежать использования селектора классов ».white-text» и настройки свойства «цвет: белый», используя селектор классов ».inner-box» вместо этого. Затем код выглядит следующим образом: < /p>
`



 
  CSS Cascade
 



 
   
     
Yellow Text
     
       
White Text
     
   
   
     
Yellow Text
     
       
White Text

     
   
 


`
< /code>
.box { /* E */
  background-color: blue;
  padding: 10px;
}

p {
  color: yellow; /* C */
  margin: 0;
  padding: 0;
}

.inner-box { /* F */
  background-color: red;
color: white; /* D */
}

#outer-box {
  background-color: purple;
}
< /code>
According to my understanding here the html element ("A" in the code) is less specific than the class selector ("D" in the code). But the text still displays not white but yellow, indicating that im wrong. So then i thought "maybe the style.css defines the styling, but the html applies it and in the html the is set to "yellow" ("B" in the code) because of the style for elements is applied after the "A" therefore overrides it (Position rule - in the .html - instead of Specifity rule)". That would indicate that the order in which the styling is applied inside the html is the determining factor. But then I see this: If we invert the order for "E" and "F", like the following code, then the it is the style.css's order (Position rule - in the .css -) the determinig factor and not the applied order in the html:
.inner-box { /* F */
  background-color: red;
}

.box { /* E */
  background-color: blue;
  padding: 10px;
}

p {
  color: yellow;
  margin: 0;
  padding: 0;
}

.white-text {
  color: white;
}

#outer-box {
  background-color: purple;
}
< /code>
Can someone please clarify what's going on here?

Подробнее здесь: https://stackoverflow.com/questions/796 ... se-and-why