CSS HTML选择器与类选择器

问题描述：

你好，我看到了一个奇怪的行为，同时使用CSS的HTML选择器和类选择器。在HTML文件中我有这样的代码：CSS 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选择器本身），则输出变化。它根本没有给我看文本注册表格，并在注册表格文本出现的区域上下显示水平线条。为什么这种奇怪的行为？

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

你在做什么选择？原生JavaScript？ jQuery的？ mootools的？ – Kristian 2012-03-16 18:23:52

你可以在http://jsfiddle.net/上为我们创建示例，因为当你定义这个东西时，不需要任何冲突。 – sandeep 2012-03-16 18:26:05

您的HTML中可能会出现比您显示更多的内容。如果将'.content {}'切换到'DIV {}'，您将影响所有'DIV'标签。可能有其他一些“DIV”存在冲突。您遇到的第二个可能的问题是其他CSS和特性问题。我喜欢这个网站回忆特异性http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html – jmbertucci 2012-03-16 18:30:30

答

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

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

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

http://www.w3.org/TR/CSS21/cascade.html#specificity – Wex 2012-03-16 19:17:50

CSS HTML选择器与类选择器

相关推荐