转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html

我们平常在用DIV CSS制作Xhtml网页页面时，常会用到class 和id来选择调用CSS样式属性。对学习CSS的新手来说class和id可能比较模糊，同时不知道什么时候该用class，什么时候又用id，以及它们用法与限制是怎么样的。接下来我们就来详细了解CLASS与ID基本属性及用法。

Class 在程序中称“类”，同时在CSS中也书面语也叫“类”。在CSS样式中以小写的“点”及“.”来命名如： .css5{属性：属性值;} ,而在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器。如： .css5{属性：属性值;} 选择器在html调用为“<div class="css5">我是class例子</div> ”如果不知道怎么引用CSS，那就可以了解下css引用。

而且class(类)在同一个html网页页面可以无数次的调用相同的class类，在这里例子里则可以在对应的网页里可以无数次调用选择“css5”。这也说明class一般是用来调用css中的预配制属性的，比如说有一个预配制属性为如这里的“.class01{属性：属性值;} ”，这样就可以像调用函数一样不用再一个网页页面里重复的配置一个“类”属性，而只需要写上一个class类选择，就可以在同一个页面里任何位置调用选择具有相同的CLASS类。

ID是表示着标签的身份，在JS脚本中会用到id，当JS要修改一个标签的属性时，JS会将id名作为该标签的唯一标识进行操作。也就是说ID只是页面元素的标识，供其他元素脚本等引用。假如你的页面里出现了两个ID那JS效果特性较出现逻辑错误不知道依据哪个ID来改变其标签属性。 在CSS里的ID不一定为JS而设置的，但是同样ID在页面里也只能出现一次，并且是唯一性。虽然可能我们才学DIV+CSS爱好者在一个页面里同时调用相同的ID多次但是仍然没有出现页面混乱错误，但是我们为了W3C及各个标准我们也要遵循ID在一个页面里唯一性。以免出现浏览器兼容问题。

Div css 页面中的ID是怎么个用法呢？
通常我们在CSS样式定义的时候 以“#”来开头命名id名称如：#css5{属性:属性值;} 这个也有点像class的定义，只是class是以小写句号“.”开头命名，而ID是以“#”好开头定义。那id是怎么个用法呢？ Css里的ID用法与class用法一样，只是把class换成id。如例子：在CSS样式定义ID --- #css5{height:25px;width: 200px;} ,调用ID --- <div id="css5">我是ID例子</div>。

接下来我们来看下完整关于CLASS和ID实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>DIV CSS中CLASS与ID实例 - -DIV+CSS-www.divcss5.com</title>

<style>

.css5{ width:100px; height:100px; border:1px solid #000; float:left; }

.css5_class{ background:#FFF;} /* 背景白色 */

#css5_id{ background:#FF0000;} /* 背景红色 */

</style>

</head>

<body>

<div class="css5 css5_class">我在浏览器下浏览，内容背景将是白色</div>

<div class="css5" id="css5_id">我在浏览器下浏览，内容背景将是红色</div>

</body>

</html>

接下来我们分析一下以上实例：class="css5 css5_class" 怎么是这样的？这里是相当于调用选择了class类css5与css5_class 。class="css5" id="css5_id" 这里同样是选择调用了class类 :css5和id :css5_id 。

id和class属性是网页中两个通用的属性，它们协同工作使整个页面变得丰富多彩。当我们为一个元素定义样式时。可以使用id，也可以使用class。但是我们也应该注意这两者的区别。

1，在css样式表中书写时，id选择符前面应该加前缀符号‘#’，而class选择符前面应该加前缀符号‘.’。

2，id属性一般在一个页面中只可以使用一次，而class可以被多次引用。

3，id作为元素的标签，用于区分不同结构和内容，而class作为一个样式，它可以应用到任何结构和内容上。

4，在布局思路上，一般坚持这样的原则：id是先确定页面的结构和内容，然后再为它定义样式：而class相反，它先定义好一类样式，然后再页面中根据需要把类样式应用到不同的元素和内容上面。

5，目前浏览器都能允许在同一个页面内出现多个相同属性值的id，一般情况下也能正常显示，不过当使用javascript通过id来控制元素时就会出现错误。

6，在实际应用时，class更多的被应用到文字版块以及页面修饰等方面，而id更多地被用来实现宏伟布局和设计包含块，或包含框的样式。

CSS中的class与id区别及用法的更多相关文章

  1. CSS中rem、em的区别

    引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...

  2. 简述Linq中.ToList(), .AsEnumerable(), AsQueryable()的区别和用法

    [TOC] 这3个方法的功能完全不同, 应按照具体业务场景使用. AsQueryable() 先说说什么是 IQueryable IQueryable 是当前的 data provider 返回的类型 ...

  3. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  4. css中margin-left与left的区别

    研究下拉菜单和弹出菜单时比较所得: 1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置 ...

  5. CSS中link与import的区别

    一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/st ...

  6. 外部引用CSS中 link与@import的区别

    差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加 ...

  7. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  8. 图论中DFS与BFS的区别、用法、详解…

    DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵 ...

  9. 图论中DFS与BFS的区别、用法、详解？

    DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵 ...

随机推荐

  1. TypeScript Handbook 1——基本类型（翻译）

    原文出处: http://www.typescriptlang.org/Handbook 基于对web开发的需要和对安神的崇拜,打算学习一下typescript. 能力有限,基本属于在自己认识的基础上 ...

  2. hashmap 读取

    hashTable hashSet 都差不多 以hashmap为例,底层是一个散列表 数组,然后数组存出一个entry对象,对象中有两个泛型属性,一个可以指向自身类型的引用,这样就可以在每一个数组的位 ...

  3. 《C++primer》v5 第4章 表达式 读书笔记 习题答案

    4.1 105 4.2 *vec.begin()=*(vec.begin())//先调用点运算符,再解引用 *vec.begin()+1=(*vec.begin())+1//先解引用,再加一 4.3略 ...

  4. jquery ajax详解

    详细参数列表url:发送请求的连接地址type:请求方式 get:获取 post:发送 put和deletetimeout:设置请求超时时间async:默认true为异步请求,false同步请求锁住浏 ...

  5. 位置指纹（LF）定位技术简介-室内定位

        信号的多径传播对环境具有依赖性,呈现出非常强的特殊性.对于每个位置而言,该位置上信道的多径结构是惟一的,终端发射的无线电渡经过反射和折射,产生与周围环境密切相关的特定模式的多径信号,这样的多径 ...

  6. elasticsearch，python包pyes进行的处理

    elasticsearch:高性能搜索引擎,官网:https://www.elastic.co/products/elasticsearch/ 对于它相信大家都不陌生,es的使用已经广泛存在 各大网站 ...

  7. Spring事务传播机制&隔离级别

    一.Propagation (事务的传播属性) Propagation : key属性确定代理应该给哪个方法增加事务行为.这样的属性最重要的部份是传播行为.有以下选项可供使用:PROPAGATION_ ...

  8. BZOJ 2743 树状数组

    不能用分块. #include <bits/stdc++.h> using namespace std; ; struct Info{int l,r,Id;}Q[Maxn]; int a[ ...

  9. 关于几种编程过程中的注释（TODO、FIXME、XXX等）

    最近看别人写的代码,注意到很多规范的代码的注释写的都特别好.只是不太明白TODO.FIXME这些事什么意思.查阅资料,看到一篇博客,遂转载而来,以供今后查阅. (转载地址http://www.cnbl ...

  10. Lua库之时间和日期操作

    Lua库之时间和日期操作 (2010-02-07 18:41:20) 转载▼ os.time() <== 返回当前系统的日历时间os.date() <== 返回本地化的时间字符串,这里是& ...