时间戳

首页 > 解决方案 > 对嵌套在 CSS 中的 ID 中的类感到困惑

css - 对嵌套在 CSS 中的 ID 中的类感到困惑

问题描述

我试图找出为什么我的 id 在选择文本颜色时不会击败我的班级。我以为我的 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 上的代码行是一个 ID，但在我的网站上，它仍然显示代码中上一个类的属性。有人可以解释为什么我必须在这里做“元素元素”而不是 ID 压倒类。

标签： css

解决方案

该类将覆盖任何 ID 样式，因为特定元素上的类比定位其父元素更具体。backi例如，该类将覆盖来自 ID 的规则，因为color元素上的类比 的父级的ID更具体。div1backidiv1backi

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

推荐阅读