html - 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" 将 h1 HTML 选择器更改为 Class 选择器时，它仍然工作得很好。

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

这是否证明类选择器和 HTML 选择器即使应用相同的样式规则效果也会表现不同？

Answer 1

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

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

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