Почему CSS Descendant Combinator не переопределяет стили селектора классов

Я использовал пример из спецификации Расчет специфичности селектора для определения селекторов. масса. Оба селектора имеют специфичность: 11 баллов. 11 = 10 (имя класса) + 1 (имя элемента)

Согласно спецификации каскадных правил w3c, второй селектор должен переопределять первый. один, потому что он появляется позже в файле. Поэтому у меня вопрос, почему абзац до сих пор красный?

p.c11 {             
  color: darkred;
}

p .c11 {              
  color: magenta;
}  
<p>
    <p class="c11">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, eius iusto     provident laudantium voluptates adipisci voluptatem amet repudiandae ex aspernatur rem voluptatibus recusandae vero corporis distinctio quia reprehenderit dolores facere.
    </p>
</p>


css css-selectors css-specificity
person ieXcept    schedule 30.12.2015    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Поэтому у меня вопрос, почему абзац до сих пор красный?

Ваш HTML-код недействителен. Вы не можете вкладывать p элементов. В соответствующей спецификации приведен элементы, которые может содержать элемент p.

Поскольку это недопустимо, вот как визуализируются элементы:

<p class="c11">Lorem ipsum dolor...</p>
<p></p>

введите здесь описание изображения

Абзац по-прежнему красный, потому что селектор p .c11 выберет элемент с классом c11, который является потомком элемента p. Пробел в селекторе p .c11 — это комбинатор потомков. Поскольку вы не можете вкладывать элементы p, селектор p .c11 ничего не выбирает.

person Josh Crozier    schedule 30.12.2015
comment
Почему я могу вкладывать div, но не могу сделать то же самое для «p»? - person ieXcept; 30.12.2015
comment
@ieXcept Поскольку раздел документа может содержать более мелкие разделы документа, но для абзаца нет смысла содержать другие абзацы. - person Oriol; 30.12.2015
comment
Кроме того, вы уверены, что p не может быть вложен в p. Согласно спецификации, p может существовать в потоке содержимого, частью которого является p. - person Michael Benjamin; 30.12.2015
comment
@ Ориол, я понимаю, что это бессмысленно, но я не уверен, что это недействительно. - person Michael Benjamin; 30.12.2015
comment
@Michael_B p можно использовать только там, где Ожидается текущий контент, а модель контента p – это фразовое содержание. Таким образом, вы не можете вкладывать абзацы. - person Oriol; 30.12.2015
comment
@Michael_B Что сказал Ориол. Кроме того, он не выполняет проверку. Возникает следующая ошибка: Нет элемента p в области видимости, но виден закрывающий тег p. - person Josh Crozier; 30.12.2015