谁能告诉我HTML里面的class和id的区别呢？？？

类class和标识id选择符

主页 >HTMLDog指南 >CSS中级指南 >类class和标识id选择符

在CSS初级教程中我们仅仅考虑了HTML选择符——以HTML标签形式出现。

你当然可以用类选择符class和标识选择符id来定义自己的选择符。

这样做的好处是，依赖于class或者id，你可以不同地表现相同的HTML元素。

在CSS中，类选择符在一个半角英文句点（.）之前，而id则在半角英文井号（#）之前。

看起来像这样：

#top {

background-color: #ccc

padding: 1em

}

.intro {

color: red

font-weight: bold

}

HTML与CSS的连接用属性id和class。像这样：

<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则用在不止一个的元素上。

你也可以为一个指定的HTML元素应用选择符，把HTML选择符放置在前面就可以了，所以， p.jam { whatever }会应用在有类“jam”的段落上。

CSS3 选择器大概有一下几个类型：

全局选择器    Universal Selector

类型选择器    Type Selector

属性选择器    Attribute Selectors

伪类    Pseudo-classes

伪元素    Pseudo-element

Class 选择器    Class Selectors

ID 选择器    ID Selectors

选择符    Combinator

下面是 W3C 官网上关于 Selector Level 3 的一个表格。我翻译了一下。

不同浏览器对 CSS 选择器有不同程度的支持，目前的浏览器（IE9前除外）已经支持了下面的绝大部分选择器。

*    任何元素

E    一个 E 类型的元素  

E[foo]    拥有“foo”属性的E 元素

E[foo="bar"]    拥有属性值等于“bar”的“foo”属性的 E 元素

E[foo~="bar"]    一个 E 元素，它的“foo”属性值是通过空格分开的一系列的值，其中有一个值等于“bar”

E[foo^="bar"]    一个 E 元素，它的“foo”属性的值是一个以“bar”开头的字符串

E[foo$="bar"]    一个 E 元素，它的“foo”属性的值是一个以“bar”结尾的字符串

E[foo*="bar"]    一个 E 元素，它的“foo”属性值包含字符串“bar”

E[foo|="en"]    一个 E 元素，它的“foo”属性的值是通过连字符（-）分割的一系列的值的字符串，其中有一个值是以“en”开头  

E:root    一个 E 元素，是文档的根元素

E:nth-child(n)    一个 E 元素，是它父元素的第 n 个子元素

E:nth-last-child(n)    一个 E 元素，是它父元素的倒数第 n 个子元素

E:nth-of-type(n)    一个 E 元素，在它同类型的兄弟元素中排在第 n 个

E:nth-last-of-type(n)    一个 E 元素，在它同类型的兄弟元素中排行倒数第 n 个

E:first-child    一个 E 元素，是它父元素的第一个子元素

E:last-child    一个 E 元素，是它父元素的最后一个子元素

E:first-of-type    一个 E 元素，是它同类型兄弟元素中的第一个

E:last-of-type    一个 E 元素，是它同类型的兄弟元素中的最后一个

E:only-child    一个 E 元素，是它父元素的唯一一个子元素

E:only-of-type    一个 E 元素，是它同类型的兄弟元素的唯一一个（没有别的同类的兄弟）

E:empty    一个没有子元素的 E 元素

E:link    一个没有被访问过的，作为超链接的锚点的 E 元素

E:visited    一个被访问过的锚点 E 元素  

E:active    一个正处于某些用户 *** 作状态的 E 元素

E:hover    一个鼠标滑过的 E 元素

E:focus     一个获得用户焦点的 E 元素

E:target    一个做为起 Refer 制定锚点的元素（url hash 相关）

E:lang(fr)    一个 language 是 fr 的 E 元素  

E:enabled    一个UI *** 作上 enabled 的 E 元素

E:disabled    一个 UI *** 作上 disabled 的 E 元素  

E:checked    一个 UI *** 作上状态为 checked 的 E 元素

E::first-line    E 元素中格式化后的第一行

E::first-letter    E 元素的第一个字母

E::before    在 E 元素之前生成的内容

E::after     在 E 元素之后生成的内容

E.warning    一个class 属性包含 warning 的 E 元素

E#myid    一个 ID 为 myid 的 E 元素

E:not(s)    一个不匹配简单的选择器 s 的 E 元素

E F    一个作为 E 元素后代的 F 元素

E >F    一个作为 E 元素子元素的 F 元素

E + F    一个紧跟在 E 元素后面的 F 元素

E ~ F    一个出现在 E 元素前面（紧挨着）的 F 元素

---