Siema, mam proste pytanie z CSSa. Uczę się aktualnie podstaw html i css z pewnego kursu video i jestem na etapie kaskadowości stylów. W ramach ćwiczeń napisałem sobie poniższy kod:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: red;
}
.czerwony p{
color: green;
}
</style>
</head>
<body>
<selector class="czerwony">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero pariatur in asperiores dicta nostrum vel iste necessitatibus magni
recusandae praesentium tenetur voluptas harum aut deserunt mollitia, repudiandae rem aliquid cupiditate!
</p>
</selector>
<p class="czerwony">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Sint ipsam eligendi autem, eius mollitia, possimus distinctio qui ex, voluptates officia quaerat sed quisquam provident reiciendis hic. Enim quam explicabo odio.
</p>
</p>
</body>
</html>
Po uruchomieniu strony pierwszy Lorem jest koloru zielonego, co jest dla mnie zrozumiałe, ale dlaczego drugi lorem też nie jest zielony, tylko czerwony? Przecież poniższa instrukcja
*.czerwony p *
mówi "weź p, które jest w klasie czerwony", więc teoretycznie powinno zadziałać.
Wydaje mi się, że nie rozumiem czegoś związanego z dziedziczeniem lub kaskadowością stylów.