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选择器更改为类选择器时，它仍然工作得很好。

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

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

Answer 1

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

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

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