CSS HTML 选择器与类选择器

Question

您好，我在使用 CSS HTML 选择器和类选择器时看到了一个奇怪的行为。在 HTML 文件中，我有以下代码：

<div class="content">
    <h1>Registration Form</h1>
</div>

在 CSS 文件中，我有：

.content
{
    margin:auto;
    width:600px;
    border:solid 1px black;
    background-color:White;
    padding:10px;
}

h1
{
    color:Gray;
    font-size:18px;
    border-bottom:solid 1px orange;
}

上面的代码完美运行。当我通过编写.h和h1 class="h"STILL将 h1 HTML 选择器更改为类选择器时，它工作得很好。

但是，当我将.content类选择器更改为div（即将div标签的类选择器转换为 DIV HTML 选择器本身）时，输出发生了变化。它根本没有向我显示文本注册表单，而是在注册表单文本所在区域的上方和下方显示了水平线。为什么这是奇怪的行为？

它是否证明即使应用 SAME 样式规则效果，类选择器和 HTML 选择器的行为也不同？

Answer 1

类选择器比类型选择器更具体。

当您将类型选择器更改为类选择器时，第一个选择器仍然具有优先权，只是因为它在前。

当您将第一个类选择器更改为类型选择器时，第二个选择器将变得更加具体，并具有优先权。