在前端开发中,很多小伙伴可能会对class和id的用法会产生很多的混淆,下载是我自己 总结的一些区别,希望能够多各位开发的小伙伴有所帮助!
区别
在一个网页里ID只能使用一次。当然即使一个id在一个网页内被使用多次,其CSS样式仍然可以实现生效,但是一般规定W3C标准是使用一次。因为ID在html里可以赋予html标签特殊的属性如一下JS动作、表单传值等特性所以区别于一个class可以使用多少的次,而一个CSS 命名的id只能使用一次避免一些特定动作、传的表单值的兼容性特性错误即使没有其它JS脚本动作、表单传值特性但是我们也一定执行一个页面只能使用一次。
id 选择器以 “#” 来定义,命名CSS选择器。
定义命名css id选择器例子:
#yangshi1{color:#F00;}定义红色
#yangshi2{color:#0F0;}定义绿色
对应html中div引用
我颜色为红色
我颜色为绿色
一个div标签的定义只能使用一个id如:
www.divcss5测试内容
或www.divcss5测试内容
两个都是不正确的,并且CSS样式属性也不能生效- 成为CSS 失效之一。
CSS class知识:
与CSS ID不同特性是clsss类可以在一个网页内无限次引用。
Class 选择器定义以“.”来定义。定义css class选择器例子:.yangshi1{color:#F00;} 定义文字为红色.yangshi2{font-size:28px;}定义文字大小为18px
对应html中div+css引用:
我颜色为红色
www.divcss5.com我字体大小为28px
我颜色为红色文字大小为28px
以上即是“yangshi1”“yangshi2”类的正确使用方法
扩展知识:能否使用数字命名CSS 属性选择器css 命名规范
以下为错误的css类使用方法:
我将无效
这样的引用方法即是错误的引用方法,同样可以得出一个只能出现一个”class=”如果出现多个css类要应用到一个div标签内,即可以使用
来应用。
一个div标签内运用id和class是可以的:
.yangshi1{… …}
#yangshi2{… …}
.yangshi3{… …}
这样是可以的也是正确的.
同样是正确的可取的。
期待更多的小伙伴共同交流和学习!