Я пытаюсь выяснить, почему мой идентификатор не превосходит мой класс, когда дело доходит до выбора цвета текста. Я думал, мой id выбьет все, что в нем вложено? Мне нужно сделать #id .class {}, чтобы изменить цвет. Я просто пытаюсь понять, что здесь происходит, чтобы лучше понять, как работают селекторы.
вот мой html код:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- links and scripts -->
<link rel="stylesheet" href="style.css">
<!-- links and scripts -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
</head>
<body>
<header style="background-color: green; color: red;">
<nav>
<ul>
<li>Home</li>
<li><a href="about.html">About</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</nav>
</header>
<section>
<h1>Hello</h1>
<div id="div1">
<p class="backi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam necessitatibus, tempora id voluptatum rerum minima dolorum voluptatem ut quo architecto laudantium aspernatur nisi eaque amet aut! Fuga, distinctio illo.</p>
<p class="class">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam necessitatibus, tempora id voluptatum rerum minima dolorum voluptatem ut quo architecto laudantium aspernatur nisi eaque amet aut! Fuga, distinctio illo.</p>
<p class="ruu">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam necessitatibus, tempora id voluptatum rerum minima dolorum voluptatem ut quo architecto laudantium aspernatur nisi eaque amet aut! Fuga, distinctio illo.</p>
<p class="class">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quisquam necessitatibus, tempora id voluptatum rerum minima dolorum voluptatem ut quo architecto laudantium aspernatur nisi eaque amet aut! Fuga, distinctio illo.</p>
</div>
</section>
</body>
</html>
вот мой css код:
/*
selctor {
property: val;
}
*/
body {
background-image: url(https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
background-size: cover;
}
h1, p {
color: white;
text-align: center;
border: solid 2px blue;
cursor: default;
}
/* p {
color: purple;
} */
li {
list-style: none;
display: inline-block;
}
.class {
color: green;
border: none;
}
.backi {
color: red;
}
.ruu {
color: yellow;
}
#div1 {
background-color: rgb(255, 192, 203, .4);
color: black;
border: none;
}
как вы можете видеть мою строку кода на. css - это идентификатор, но на моем веб-сайте он по-прежнему показывает свойство из предыдущего класса в коде. может кто-нибудь объяснить, почему я должен использовать здесь «элемент элемента» вместо идентификатора, превосходящего класс.