下载文档原格式
id和class的区别id和class是定义样式⽤到的，不同的是定义样式时的写法不⼀样，使⽤id选择样式时，定义的格式为 #main{width:20px;} ，使⽤class时⽤到的是 .main{width:20px;}id重复使⽤在应⽤到js的时候可能会产⽣错误（当中⽤到这个id的时候），没有规定不能重复使⽤。
在⼀个页⾯中，有许多的控件(元素或标签)。
为了更⽅便的操作这些标签，就需要给这些标签标识⼀个⾝份牌。
⽬录1. ：指定标签的名称。
2. ：指定标签的唯⼀标识。
3. ：指定标签的类名。
1. name指定标签的名称。
1.1 格式<input type="text" name="username" />1.2 应⽤场景①form表单：name可作为转递给服务器表单列表的变量名；如上⾯的传到服务器的名称为：username='text的值'。
②input type='radio'单选标签：把⼏个单选标签的 name设为⼀个相同值时，将会进⾏单选操作。
<input type="radio" name='sex'/>男<input type="radio" name='sex'/>⼥③快速获取⼀组name相同的标签：获取拥有相同name的标签，⼀起进⾏操作，如:更改属性、注册事件等。
function changtxtcolor() {var txts = document.getElementsByName('txtcolor'); //获取所有name=txtcolor 的标签for (var i = 0; i < txts.length; i++) { //循环遍历标签，并把背景⾊改为redtxts[i].style.backgroundColor = 'red';}}1.3 特性name属性的值，在当前page页⾯中并⾮唯⼀性。
1、CLASS和ID的区别
在样式表定义一个样式的时候，可以定义id也可以定义class。
1、在CSS文件里书写时，ID加前缀“#”；CLASS用“.”
2、id一个页面只可以使用一次；
class可以多次引用。
3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；CLASS是一个样式，可以套在任何结构和内容上，就象一件衣服；
4、ID 的优先级要高于class,
5、从概念上说就是不一样的：
id是先找到结构/内容，再给它定义样式；
class是先定义好一种样式，再套给多个结构/内容。
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。
css选择器的使⽤css选择器的使⽤⽅法今天给⼤家分享⼀下css常⽤的选择器使⽤。
⾸先我们先了解⼀下为什么要使⽤选择器。
引⼊、要使⽤css对HTML页⾯中的元素实现⼀对⼀，⼀对多或者多对⼀的控制，这就需要⽤到CSS选择器。
HTML页⾯中的元素就是通过CSS选择器进⾏控制的，这就要⽤到我们的css选择器。
选择器的类别：1. 类型选择器2. id选择器3. class选择器4. 通⽤选择器5. 群组选择器6. 后代选择器7. 伪类选择器8. 属性选择器9. 层级选择器10. ...⼀、类型选择器的⽤法：样式：<style>div{width: 500px;height: 500px;background: #000;}</style>结构：<body><div></div></body><style>div{width: 500px;height: 500px;background: #000;}</style><body><div></div></body>运⾏结果：css通过类名来控制改变样式代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{width: 200px;height: 100px;background: rgb(248, 2, 2);}</style></head><body><div id="box"></div></body></html> id选择器⽤法给标签取⼀个id=“名称”的属性与属性值，属性值是⾃⼰命名。
css中class和id之间有什么区别？我们平常在⽤div+css制作html⽹页页⾯时，常会⽤到class 和id来选择调⽤css样式属性。
对学习CSS的新⼿来说class和id可能⽐较模糊，同时不知道什么时候该⽤class，什么时候⼜⽤id，以及它们⽤法与限制是怎么样的。
ID和class都是“钩⼦”我们需要⼀个使⽤html/xhtml语⾔描述⽂档内容的⽅式，类似的基础元素有<h1>,<p>和<url>来完成这样的⼯作，但我们的基础标签不能覆盖⽹页元素和布局选择中的所有类型。
因此我们需要ID和class。
例如<ul id="nav">这将明确的给我们针对这个⽆序列表的机会，我们可以操作它到页⾯中唯⼀的另⼀个⽆序列表中。
或者在我们的⽹页中有⼀个段落并且没有相关的标签去标注它，例如页脚（footer），这⾥我们可以这样做<div id="footer">或许我们有⼀些盒⼦（box）在我们的侧边栏中，为了保持内容分离的⽅式有：<div>这些ID和class的钩⼦需要我们进⾏标注并执⾏他们。
css显然需要我们建⽴选择并做我们的风格，但⼀些类似JavaScript的⽹页语⾔也依赖他们。
但他们之间的不同是什么呢？ID是唯⼀的每个元素仅可以有⼀个ID每个页⾯仅可以有⼀个元素拥有这个ID如果你不⽌⼀次的使⽤相同的ID你的代码将不能通过验证，验证对我们所有⼈来说很重要...类不是唯⼀的你可以在多个元素中使⽤相同的类你可以使⽤多个类在⼀个元素中很多类型信息需要应⽤到页⾯中的多个对象中，这些都需要class实现，例如页⾯多次使⽤“widgets”：<div></div><div></div><div></div>现在可⽤“widget”作为你的钩⼦，对每⼀个地⽅进⾏相同的类型设置。
id和class的使用方法一、什么是id和class？在HTML和CSS中，id和class是两种常见的属性，用于标识和区分不同的元素。
id属性用于唯一标识一个元素，每个元素只能有一个id属性，并且id 属性值必须是唯一的。
class属性用于标识一组具有相同特征的元素，可以为多个元素添加相同的class属性值。
二、如何使用id？1. 定义id在HTML中定义一个id非常简单，只需要在对应的元素上添加一个“id”属性，并给它赋予一个唯一的值即可。
例如：```<div id="header">这是头部</div>```2. 使用id使用id可以实现对某个特定元素进行样式控制或JavaScript操作。
例如：```#header {background-color: #fff;color: #000;}```这段CSS代码将会把ID为“header”的div背景色设置为白色，字体颜色设置为黑色。
3. 注意事项- id必须唯一，不能重复。
- id命名要规范，最好采用英文单词或者缩写。
- 不要使用数字或者特殊字符作为开头。
三、如何使用class？1. 定义class在HTML中定义一个class也非常简单，在对应的元素上添加“class”属性，并给它赋予一个名称即可。
例如：```<div class="box">这是一个盒子</div>```2. 使用class使用class可以实现对一组元素进行样式控制或JavaScript操作。
例如：```.box {width: 200px;height: 200px;background-color: #ccc;}```这段CSS代码将会把所有class为“box”的div的宽度和高度都设置为200px，背景色设置为灰色。
3. 注意事项- class可以重复使用，一个元素可以有多个class。
CSS中id和class的区别介绍
我们为大家收集整理了关于CSS中id和class的区别，以方便大家参考。
但是一般规定W3C标准是使用一次。
因为ID在html里可以赋予html标签特殊的属性如一下JS动作、表单传值等特性所以区别于一个class可以使用多少的次，而一个CSS 命名的id只能使用一次避免一些特定动作、传的表单值的兼容性特性错误即使没有其它JS脚本动作、表单传值特性但是我们也一定执行一个页面只能使用一次。
id 选择器以“#” 来定义，命名CSS选择器。
定义命名css id选择器例子：
#yangshi1{color:#F00;}定义红色
#yangshi2{color:#0F0;}定义绿色
对应html中div引用
我颜色为红色。
div+css样式表的id和class常⽤命名规则要是就⼏⾏或⼏⼗⾏代码吧！就根据英⽂单词就⾏了。
可是要是多了那就不好写了，有时候就直接⽤汉语拼⾳或拼⾳的⾸字母代替。
可是多了吧，⾃⼰写的都看不出是什么意思，别说再让程序员调⽤这些样式了。
的id和class的区别:就⼀句来概括, class可以定义多个值并且可以应⽤到多个标签上，但id只能是⼀个。
所以就开始查⼀些相关的div+css样式表id和class的常⽤命名规则，请⼤家参考⼀下： ⾸先讲⼀下的id的常⽤命名规则如下表所⽰:页头header登录条loginBar标志logo侧栏sideBar⼴告Banner导航nav⼦导航subNav菜单menu⼦菜单subMenu搜索search滚动scroll页⾯主体main内容content标签页tab⽂章列表list提⽰信息msg⼩技巧tips栏⽬标题title加⼊joinus指南guild服务service热点hot新闻news下载download注册regsiter状态status按钮btn投票vote合作伙伴partner友情链接friendLink页脚footer版权copyRight 实际上上⾯的的id命名也会经常⽤⼤⼩写和_来区分，⽐如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。
也可以使⽤"类型+变量名称"的规则来命名，⽐如写⼀个红⾊字体的class,可以.f_red {}(f是font 字体的缩写)。
总之原则是：⼤⼩写、_、缩写，⼤⼤增强代码的可读性。
再讲⼀下的class的常⽤命名规则如下表所⽰:外 套wrap主导航mainNav⼦导航subnav页 脚footer整个页⾯content页 眉header商 标label标 题title主导航mainNav边导航sidebar左导航leftsideBar右导航rightsideBar旗 志logo标 语banner菜单内容menu1Content菜单容量menuContainer⼦菜单submenu边导航图标sidebarIcon注释note⾯包屑breadCrumb容器container内容content搜索search登陆login功能区shop当前的current 当然像的id和class的命名远远不⽌这些,可能还会有更多的命名,你可以⽤⼀些通俗的易懂.容易理解的⼀些来命名,如果您有更好的的id和class的命名规则的话,请留⾔，多多指教.。
CSS优先级----ID,Class,style（内联）常见情况⼀览 ⼀.外部CSS，内部CSS，内联CSS优先级 1.内联CSS（声明在元素上“style=“*****””） 》 内部CSS（声明在head标签内的） 》 外部CSS（引⽤css⽂件） ⼆.ID，Class，Style（内联）优先级 1.3者的样式设置不冲突----------结论：3者的样式设置不重复，就会依照所有的样式去渲染元素，3者都采⽤。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><STYLE TYPE="text/css">.testclass{ /*⽤来测试class的字体⼤⼩设置*/font-size:50px;}#testid{border:1px solid black;/*⽤来测试id的边框样式设置*/}</STYLE></head><body><div id='grandfather' style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <!--⽤来测试style（内联）的字体颜⾊设置--><p id="testid" class="testclass" style="color:blue;">测试⽤例元素</p></div></body></html> 2.局部2者重复碰撞设置---------------结论： style（内联样式） 》 ID 》Class ①class 和 id 冲突设置（重复设置的边框样式是按照id来渲染的）<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><STYLE TYPE="text/css">/*⽤来测试class的边框样式（绿⾊）*/.testclass{border:1px solid green;}/*⽤来测试id的边框样式（粉⾊）*/#testid{border:1px solid pink;}</STYLE></head><body><div id='grandfather' style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <p id="testid" class="testclass" style="color:blue;">测试⽤例元素</p></div></body></html> ②class 和 style 冲突设置（重复的部分是按照style（内联）样式来渲染的）<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><STYLE TYPE="text/css">/*⽤来测试class的字体样式（绿⾊）*/.testclass{color:green;}/*⽤来测试id的边框样式（粉⾊）*/#testid{border:1px solid pink;}</STYLE></head><body><div id='grandfather' style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <!-- ⽤来测试style的字体颜⾊样式（⿊⾊） --><p id="testid" class="testclass" style="color:black;">测试⽤例元素</p></div></body></html> ③id和style冲突设置（重复的部分是仍然是按style（内联样式）来渲染的）<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><STYLE TYPE="text/css">/*⽤来测试class的字体样式（绿⾊）*/.testclass{color:green;}/*⽤来测试id的字体样式（粉⾊）*/#testid{color:pink;}</STYLE></head><body><div id='grandfather' style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <!-- ⽤来测试style的字体颜⾊样式（⿊⾊） --><p id="testid" class="testclass" style="color:black;">测试⽤例元素</p></div></body></html> 3.3者冲突测试-------------------结论：冲突部分按照style（内联样式）》ID》Class 来渲染，不冲突部分全部采⽤并渲染。
css初学者：id和class的选择
css初学者在刚开始用div+css布局的时候，常常被一个问题所困扰：当定义一个属性时，是使用id，还是使用class?在这我谈下自己在工作中对id 和class的使用原则。
希望对初学者有所帮助。
id的使用原则
我们知道id具有唯一性，也就是说在整个xhtml中id是不能重复的，所以我们在写网页的时候，大的结构用id，比如：logo、导航、主体内容、版权等，根据命名规范分别命名为#logo、#nav、#contenter、#copyright。
还有一种情况就是：我们要通过js作用一个层，以实现某种效果的时候，用id。
这也是由id的唯一性决定的。
class的使用原则
class在css定义中具有普遍性，可以无限次的重复使用，这也体现了
div+css布局的优越性。
class常用于结构内部，这样做的好处是有利于网站代码的后期维护与修改，这样会让所有的class成为id的子级或者孙级。
另外需要注意一点的是尽量不要让class包含id，比如.ff
#childer{...},这样做显然不可取，不符合书写习惯。
前面也介绍过良好的书写习惯，对写出规范的代码，和其他同事的合作，以至于后期的维护都是很有好处的。
文章来源于：/article-24289-1.html。
CSS中的class与id区别及用法
我们平常在用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"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV CSS中CLASS与ID实例- -DIV+</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 。
本页通过CSS实例与CLASS类和ID分别的讲解，相信您能从此深刻认识和区分它们并且灵活。
特别注意：在命名id和class类的时候特别要注意大小写，ID和class是对大小写非常敏感的，最好以英文开头，不要用中文命名CSS类名。
欢迎来到DIVCSS5希望本页对你有帮助！。
