Почему не работает наследственность в css

alek.xiv · December 7, 2016

Привет! Дорогие коллеги, помогите, пожалуйста, новичку

Есть код:
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>Каждому мамонту — по лыжне!</title>
   <link rel="stylesheet" href="exmp.css">
</head>
<body>
   <h1>Пишется?</h1>
   <p>
       <div class="class">
           <div class="class2">
               <span class="class3">
                   <s>Надпись!</s>
               </span>
           </div>
       </div>
   </p>
   <h2>Как-то так</h2>
</body>
</html>

Самый значимый фрагмент кода выделил красным.

К HTML приделана CSS-ка, в которой написано следующее:

p .class .class2 .class3 s {
   color:#f0f;
   }
Однако цвет текста "Надпись!" (чего я изначально и добивался таким способом) не меняется! Вопрос к Вам, уважаемые знатоки: почему так? Ведь должно же! Экспериментальным способом установил, что косяк как-то связан с селектором p.

Если пишу в CSS что-нибудь такое:
html body .class .class3 s {
   color:#f0f;
   }

Или такое:

div .class2 span s {
color:#f0f;
}

Всё работает превосходно, но стоит указать p, и красота моментально заканчивается, весь текст становится стандартного чёрного цвета. Почему так? :mellow:

Edited December 7, 2016 by alek.xiv

Vlad · December 7, 2016

Внутрь <p> нельзя вкладывать элементы <div>. Браузер самостоятельно исправляет ошибки, закрывая <p> и ломая вашу структуру, из-за чего стили и перестают работать, поскольку вложенность элементов поменялась. Не делайте так, <p> только для текста, а не для <div>.

wwt · December 7, 2016

Добавлю, любой блочный элемент разорвет <p> будучи вложенным в него непосредственно.

Sign In

Почему не работает наследственность в css

Question

alek.xiv

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information