CSS HTML Selector vs Class选择器

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选择器更改为类选择器时，它仍然运行良好。

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

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

Answer 1

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

当你将类型选择器更改为类选择器时，第一个选择器仍然具有优先权，因为它首先出现。

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