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

[Anonymous]

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

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

  
  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>
Согласно моему пониманию здесь, html -элемент  («a» в коде) менее специфичен, чем селектор классов («D» в коде). Но текст все еще отображается не белый, а желтый, что указывает на то, что я ошибаюсь. Итак, я подумал: «Может быть, style.css 

определяет стиль, но HTML применяет его, и в HTML устанавливается на« желтый »(« B »в коде), потому что стиль для применяется после« а », а не в том, что он переопределяет, в соответствии с ними, а также. Правило) ». Но тогда я вижу это: если мы инвертируем порядок для «E» и «F», как и следующий код, то это порядок Style.css (Правило позиции -в.

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

.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