css中class的用法（CSS class 和id有什么区别）
本文目录
CSS class 和id有什么区别
1、可标识元素数量：
id只可用于标识一个元素，而class可用于标识多个元素。
2、元素可添加数量：
每个元素只能有一个id，而可以在同一元素上使用多个class。
3、选择器上的区别：
在CSS中，class选择器是一个以点（“.”）开头的名称，而ID选择器是一个以哈希字符
（“＃”）开头的名称。
使用class选择器的示例代码：
《style type="text/css"》.footer{background:red;}《/style》
《div class="footer"》footer《/div》
使用id选择器的示例代码：
id： 《style type="text/css"》#footer{background:red;}《/style》
《div id="footer"》footer《/div》
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。
1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."
2、id一个页面只可以使用一次；class可以多次引用。
3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。无论是用“.”，还是“#”都无所谓，但是最好遵循，主要的重要的特殊的最外层的用“#”。class在同一个HTML网页页面可以无数次的调用相同的class；这样就可以像调用函数一样不用再一个页面i重复一个属性，只需要一个class类的选择，就可以在同一个位置调用相同的CLASSid表示着标签的身份，在JS脚本中会用到ID ，当js 要修改一个标签属性时，js会将id名做为唯一标识进行操作，id在页面职能出现一次。并且是唯一性。
css中class的应用方法
css中的class是我们在使用过程中的类名，但我们需要给某个标签添加样式时可以用类来命名，而类名的使用是可以重复的，简洁的说就是一个页面可以出现多个类名一样的命名，具备重复使用性，而id一个网页中只能出现一个
更多文章：
2026年10月11日 05:30
跷二郎腿太低好吗？想要通过贴墙站改正二郎腿影响的话，有哪些要点需要注意
2026年10月11日 05:10
易语言点击js按钮（易语言网页填表怎样点击链接为“javascript:void（0）“的按钮）
2026年10月11日 03:00
2026年10月11日 01:10
2026年10月11日 01:00
compare with造句（用compared with和compared to造句）
2026年10月10日 23:30
2026年10月10日 22:50
tensorflow与keras对应版本（为什么tensorflow2.8没有keras）
2026年10月10日 22:10
2026年10月10日 22:00
maven仓库jar网站（如何在maven仓库中添加jar包）
2026年10月10日 19:50
