主页 / 问题 / 1547593
Accepted
Reiji Akkerman
Asked:2023-10-24 10:25:48 +0800 CST2023-10-24 10:25:48 +0800 CST

为什么css属性不生效？

  • 772

如果两个选项都导致相同的元素，为什么“h1”元素出现在第一个选项中，而不是第二个选项中？

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="position.css">
        <link rel="stylesheet" href="js_position.css">
    </head>
    <body>
        <div class="div">
            <h1 class="cont">I'm position</h1>
        </div>
    </body>
</html>

选项1

位置.css

.div > h1 {
    display: block;
}

js_position.css

.cont {
    display: none;
}

选项2

位置.css

.cont {
    display: block;
}

js_position.css

.cont {
    display: none;
}
html

1 个回答

  1. Best Answer

    在第一个选项中，显示 h1 元素，因为position.css 文件中的样式规则比js_position.css 文件中的样式规则更具体。特定规则 .div > h1 引用 h1 元素，该元素是类 div 元素的子元素。因此，此规则具有更高的优先级，并覆盖 js_position.css 文件中的 .cont 规则。

    在第二个选项中，不显示 h1 元素，因为在 js_position.css 文件中，.cont 规则与position.css 文件中的优先级相同，但它通过设置 display: none 来覆盖它。因此，类 cont 的 h1 元素仍然隐藏。

    • 1

相关问题