CSS HTML选择器和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;
}

上述代码完美运行。 当我将h1 HTML选择器改为Class选择器，写入 .h 和 h1 class="h"，它仍然完美运行。

但是，当我将 .content 类选择器更改为 div（即将div标记的类选择器转换为DIV HTML选择器本身）时，输出结果发生了变化。 它根本没有显示“Registration form”文本，并在Registration form文本应该出现的区域上下显示了水平线。 这是为什么会出现这种奇怪的情况？

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

- Aditya Bokade

---

你用什么来进行选择？原生JavaScript？jQuery？MooTools？ - Kristian

你能否在 http://jsfiddle.net/ 上为我们创建一个示例呢？因为你已经定义清楚了这个东西，所以不需要任何冲突。 - sandeep

你的HTML中可能有更多的内容，但你没有展示出来。如果你将.content{}改为DIV{}，你会影响到所有的DIV标签。可能是其他的DIV标签发生了冲突。第二个可能的问题是与其他CSS和特异性问题有关。我喜欢使用这个网站来回忆特异性：http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html - jmbertucci

Answer 1

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

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

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

- Guffa