CSS HTML 选择器与类选择器答案

【问题标题】：CSS HTML Selector vs Class selectorCSS HTML 选择器与类选择器
【发布时间】：2012-03-17 02:29:28
【问题描述】：

你好，我在使用 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 选择器ITSELF）时，输出发生了变化。它根本没有向我显示文本注册表单，而是在注册表单文本所在区域的上方和下方显示水平线。为什么会出现这种奇怪的行为？

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

【问题讨论】：

你用什么来做选择？本机JavaScript？ jQuery？ mootools？
您能在jsfiddle.net 上为我们创建示例吗，因为您定义了事物，因此不需要任何冲突。
您的 HTML 中的内容可能比您显示的要多。如果您将.content{} 切换为DIV{}，您将影响所有DIV 标签。其他一些DIV 可能存在冲突。您遇到的第二个可能问题是其他 CSS 和特异性问题。我喜欢这个网站，因为它回忆起特异性stuffandnonsense.co.uk/archives/css_specificity_wars.html

标签： html css css-selectors

【解决方案1】：

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

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

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

【讨论】：