2016-04-05 4 views
-1

Я спросил немного неправильно, но все же полезен, вопрос here. Публикация нового для того, чтобы держать его в чистоте.Специфичность и наследование в CSS

Внизу, не могли бы вы помочь мне понять, почему .one li побед над .one .two, что делает Item One синим вместо розового? Согласно правилам специфичности (link) два вложенных класса имеют показатель специфичности 20, а класс и элемент имеют оценку 11. .one .two должен, согласно этому, выиграть.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    .one { 
 
     color: red; 
 
    } 
 
    .one li { 
 
     color: blue; 
 
    } 
 
    .one .two { 
 
     color: pink; 
 
    } 
 
    .one .two .three { 
 
     color: purple; 
 
    } 
 
    .two { 
 
     color: green; 
 
    } 
 
    .one.two { 
 
     color: yellow; 
 
    } 
 
    .two.three { 
 
     color: grey; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="one"> 
 
    <ul class="two"> 
 
     <li>Item One</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="three two one"> 
 
    <p>TEST</p> 
 
    </div> 
 
</body> 
 

 
</html>

+1

Тот же случай, что и в другом вопросе. '.one li' для' li' (прямо к нему), тогда как '.one .two 'присваивает цвет родительскому' ul'. Наследование происходит только тогда, когда сам 'li' не имеет определенного цвета. Вычисления спецификаций применяются только тогда, когда два или более селектора нацелены на один и тот же элемент. Здесь они не нацелены на один и тот же элемент, и, следовательно, специфика не имеет никакой роли. – Harry

+0

Принятый ответ на ваш предыдущий вопрос объясняет, почему очень четко. Возможно, вам следует попросить разъяснения по тем вопросам, которые вы не поняли в ответ? – Quentin

+0

@Quentin В предыдущем разделе не обсуждается Inheritance, на что обращается этот конкретный вопрос. – Anders

ответ

0

.one .two делает ваш уль розовый.
.one li делает ваш ли синий.

так что вы смотрите на голубую ли на вершине розовой улицы.

Смежные вопросы