css中id和class区别（css里面，id和class的区别是什么看了很多解释，就是不懂，什么叫id只能用一次，class可以多次引用）

本文目录

• css里面，id和class的区别是什么看了很多解释，就是不懂，什么叫id只能用一次，class可以多次引用
• id和class的区别
• 《CSS》中“id”和“class”的区别是什么
• css里面id和class的区别是什么什么叫id只能用一次class可以多次引用
• CSS中的ID选择器和类选择器有什么区别
• CSS中Class与ID的区别，Margin与Padding的区别

css里面，id和class的区别是什么看了很多解释，就是不懂，什么叫id只能用一次，class可以多次引用

CSS里面ID与Class的区别是格式与用途的不同，具体有：

1. 在CSS文件里书写时，ID加前缀"#"；Class用"."

2. ID一个页面只可以使用一次；Class可以多次引用。

3. ID是一个标签，用于区分不同的结构和内容。就如函数中的变量，如果一个调用中出现两个一致的变量，就会出现混淆，系统将报错无法识别；Class是一个样式，可以套在任何结构和内容上，如同属性一致则认为是一个类。

4. 从概念上说就是不一样：ID是先找到结构/内容，再给它定义样式；Class是先定义好一种样式，再套给多个结构/内容。

CSS里面定义ID与Class格式与用途的不同具体（例子）有：

1. 定义格式不同：

   形如ID="aaa"定义的,在css中是这样设置其样式的：#aaa{ 样式列表 }以Class="bbb"形式定义的，在CSS中应该这样设置其样式：.bbb{ 样式列表 }

2. 用途不同：Class元素分2种,关联的和独立的。关联的用于html的相关tag，比如：h1.redone{color:red}《h1 class= redone》 字体为红色的 《h1》《h1》 字体是黑色的 《h1》独立的元素可以用于所有的html元素的，比如.classname {property:value}ID元素和独立的Class功能相似，区别是ID是唯一的而且对于javascript操作html 元素有帮助。#idname {property: value}

归纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。

• 注：A、在样式表定义一个样式的时候，可以定义id也可以定义class。B、目前主流浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过ID来控制Div时就会出现错误。

id和class的区别

id和class的区别如下：1、唯一性和重复可用性。id在网页结构中只能是唯一的，如果指定了一个元素的id为aa，那么网页中就不能再出现一个id为aa的HTML元素。虽然强大的浏览器会支持多个重复id并赋予对应样式，但这是不标准不允许的。而class相反，它可以在网页结构中重复使用，你指定了一个元素的class为bb，同时可以指定下一个元素的class为bb，这两个元素可以同时被应用bb的样式。此外，你还可以为一个元素制定多个class属性值，这样就会同时获得多个属性的样式。2、CSS中优先级不同。在CSS选择器中，对id和class的样式应用优先级不同。id的样式优先级要高于class的样式优先级。3、跳转功能。使用id属性可以增加锚标记跳转功能，而class没有这个功能。以上就是id和class的区别。

《CSS》中“id”和“class”的区别是什么

class可以在页面里面重复使用，id由于在页面里面只能出现一次，所以不能重复使用，所以尽量用class来写，这样能在页面里面重复引用你写的css，减小工作量和代码量。这种情况尽量用id：页面大的模块里面，用id来区分不同的模块。比如页面里面有这样的模块：最新新闻，推荐新闻等。就可以考虑用id来区分。还有一点，由于id是页面中唯一的，更多的是定义来留给给页面里面的javascript用。补充：class和id在页面里面的使用方法： class：《style type="text/css"》.footer{background:red;}《/style》 《div class="footer"》footer《/div》id： 《style type="text/css"》#footer{background:red;}《/style》《div id="footer"》footer《/div》定义class的css是用点：“.”，如.footer定义id的css是用井号“#”，如#footer//让div居中对齐让div内的内容（包括文字及图片）居中的代码是： text-align:center; 《style type="text/css"》 刚刚入门，要记住。.align-center{ margin:0 auto; /* 居中 这个是必须的，，其它的属性非必须 */ width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */ background:red; /* 背景色 */ text-align:center; /* 文字等内容居中 */ } 《/style》

css里面id和class的区别是什么什么叫id只能用一次class可以多次引用

id的只能用一次是说同一个id在一个页面中只能出现一次，例如页面中有一个元素取id为“naviBar”，那么在这个页面中就不能再为其他元素取“naviBar”这个id了\x0d\x0aclass可以多次引用，是说在一个页面中，可以为多个元素加上同一个名称的class，例如 \x0d\x0a

\x0d\x0a
• a
\x0d\x0a
• b
\x0d\x0a\x0d\x0a
• c
\x0d\x0a\x0d\x0a
• d
\x0d\x0a\x0d\x0a

CSS中的ID选择器和类选择器有什么区别

相同点：可以应用于任何元素不同点：1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。下面代码是正确的：而下面代码是错误的：2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用ID词列表）。下面的代码是正确的上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。下面的代码是不正确的上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。

CSS中Class与ID的区别，Margin与Padding的区别

Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。这两个区别都是比较容易混淆的问题，尤其是Class与ID，相信很多人并没有仔细了解过之中区别。以下是我的一些理解：1. Class与ID的区别一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线，你可以通过CSS，Javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ，class="Gandalf"，class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。至于ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头，一个内容区域和一个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。归纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。（刚才在Dreamweaver中试了一下，确实，并没有出错）在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用。2. Margin与Padding的区别margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。说白了，一个是内部的距离，一个是外部的距离；padding：内边距；margin：外边距。两者都是代替表格最重要的作用-分割块的好方法，区别在于Margin是不同的Tag间互相隔离的距离而Padding是同一元素中不同内容分割使用，这在表格中最看得清楚。尤其是当对一个区域加载了背景样式之后，Padding下的内容背景色会发生改变，而Margin则不会有所改变。margin的取值有：margin-top, margin-right, margin-bottom, margin-leftpadding的取值有：padding-top, padding-right, padding-bottom, padding-left简写法（举例）：四个边距均为10px：h1 {margin: 10px}顶边距和底边距为10px，左边距和右边距是父元素宽度的2%：h1 {margin: 10px 2%}顶边距为10px，左边距和右边距是父元素宽度的2%，底边距是-10px：h1 {margin: 10px 2% -10px}顶边距为10px，右边距是父元素宽度的2%，底边距是-10px，而左边距由浏览器设置：h1 {margin: 10px 2% -10px auto}