CSS中class和id的区别
类选择器和ID选择器是CSS中经常使用到的选择器，看书看一遍的时候就如囫囵吞枣，一扫而过，所以理解得也不透彻。今天又重新看到了，脑海里的概念总算清晰了点。所以总结了一下他们之间的区别，列出如下：
1.所绑定的标签属性不同，class选择器绑定的标签属性为class，例如下面的例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 5 <title>class选择器和id选择器</title> 6 <style type="text/css"> 7 .classselector {font-family: sans-serif; color: red;} 8 #idselector {font-family: monospace; color: blue;} 9 </style> 10 </head> 11 <body> 12 <p class="classselector">我被类选择器射中了，啊~</p> 13 <p id="idselector">我射中了ID选择器，耶~</p> 14 </body> 15 </html>
class选择器被含有该类名的<p>标签给调用了，而id选择器则被含有该id的<p>标签给调用了。另外，class选择器的定义和命名是需要在类名前面加上“.”的，而id选择器则是加上“#”。
2.用法不同，在一个html文档中，每个标签的ID都是唯一的，所以ID选择器会更加有针对性。而不同的标签都可以调用同一个class选择器，所以它比较具有通用性。例如下面的例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 5 <title>class选择器和id选择器</title> 6 <style type="text/css"> 7 .classselector {font-family: sans-serif; color: red;} 8 #idselector {font-family: monospace; color: blue;} 9 </style> 10 </head> 11 <body> 12 <p class="classselector">我被类选择器射中了，啊~</p> 13 <p id="idselector">我射中了ID选择器，耶~</p> 14 <p class="classselector">我又被类选择器射中了，啊啊~</p> 15 <p class="classselector">我再被类选择器射中了，啊啊啊，我不玩了~</p> 16 17 <p id="idselector">我不想变成蓝色字体啊啊啊</p> 18 </body> 19 </html>
从例子中可以看到，id选择器同样可以被多个具有相同id的<p>标签给调用了，但是我们应该尽量不要让这种情况发生，特别是当你只想一个特有的id适用这个id选择器时，最后的办法就是不要在一个页面存在两个相同的id值。
3.优先级不同，id选择器的优先级是要大于类选择器的优先级的。这点就不举例说明了，下次在记录学习CSS优先级时候再写出来，嘿嘿，搞定。
2056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
