关于CSS选择器class与ID的区别

网络整理 - 07-27

CSS选择器有ID和Class两种,他们有什么区别呢?使用点号(.)创建class选择器,使用hash符号(#)创建ID选择器。

例子: 
#top {
     background-color: #ccc;
     padding: 1em
}

.intro {
     color: red;
     font-weight: bold;
}

html页面通过id和class属性调用CSS,像下面这样:

例子: 
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>

id和class的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用。

ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;CLASS是一个样式,可以套在任何结构和内容上,就象一件衣服。

从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

目前的浏览器还都允许用多个相同ID,一般情况下也能正常显示,不过当你需要用通过id来控制div时就会出现错误。