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

[Anonymous]

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

Код: Выделить всё

.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;
}

Код: Выделить всё

 

  CSS Cascade
 




  
    
      Yellow Text
      
        
White Text
     
    
   
      
Yellow Text
       
        
White Text
 
     
    
  

Насколько я понимаю, элемент HTML («A» в коде) менее конкретен, чем селектор класса («D» в коде). Но текст по-прежнему отображается не белым, а желтым, что указывает на мою неправоту. Тогда я подумал: «Может быть, стиль style.css определяет стиль, но HTML применяет его, а в HTML для установлено значение «желтый» («B» в коде), потому что стиль для элементов применяется после «A», поэтому он переопределяет его (правило положения - в .html - вместо правила специфичности)".
Это указывало бы на то, что порядок, в котором стиль, примененный внутри HTML, является определяющим фактором. Но затем я вижу следующее: если мы инвертируем порядок букв «E» и «F», как показано в следующем коде, то определяющим фактором будет порядок style.css (правило положения — в .css -), а не примененный порядок в 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;
}

Что здесь происходит?


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