你好,我在使用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选择器即使应用相同的样式规则效果,也会表现出不同的行为?
.content{}
改为DIV{}
,你会影响到所有的DIV
标签。可能是其他的DIV
标签发生了冲突。第二个可能的问题是与其他CSS和特异性问题有关。我喜欢使用这个网站来回忆特异性:http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html - jmbertucci