ID选择器和类选择器的合理使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ID选择器和类选择器的合理使用相关的知识,希望对你有一定的参考价值。

一.什么是ID选择器和类选择器

作为CSS选择器的最主要的两大选择器:ID选择器主要指的是通过DOM(Document Object Model)节点的ID选取节点,例如代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>ID选择器</title>
 6         <style type="text/css">
 7             #box{
 8                 background-color: #0000FF;
 9             }
10         </style>
11     </head>
12     <body>
13         <div id="box"></div>
14     </body>
15 </html>

在CSS中使用ID选择器需要通过"#"+"id名称".类选择器(有的也称为class选择器)主要指的是通过DOM(Document Object Model)节点的类名(class)选取节点,例如代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>ID选择器</title>
 6         <style type="text/css">
 7             .box{
 8                 background-color: #0000FF;
 9             }
10         </style>
11     </head>
12     <body>
13         <div class="box"></div>
14     </body>
15 </html>

在CSS中使用类选择器需要通过"."+"类名".

二.ID选择器和类选择器的异同

相同点

两者选择器均能够选取到DOM节点并给DOM节点添加样式.

不同点

  1. 每个DOM节点允许有多个class,但是一般只允许拥有一个ID.一个DOM节点拥有多个class自然会产生样式的叠加,那么如果一个DOM节点拥有多个ID会出现什么情况?
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>ID选择器</title>
     6         <style type="text/css">
     7             #bgbox{
     8                 background-color: #0000FF;
     9             }
    10             #widthbox{
    11                 width: 100px;
    12                 height: 100px;
    13             }
    14         </style>
    15     </head>
    16     <body>
    17         <div id="bgbox widthbox"></div>
    18     </body>
    19 </html>

    根据测试,发现浏览器(测试时使用的Chrome)窗口预览的时候发现div的样式既没有颜色也没有宽度高度,这就说明一个DOM节点是不允许拥有多个ID

  2. ID选择器对DOM节点的样式控制的优先级高于类选择器。
  3. 在符合W3C标准的页面中,ID选择器选取DOM节点的数量≤1,类选择器的选取DOM节点的数量可能为0,也可能为N(N≥1)。

三.ID选择器和类选择器的合理使用

  1. ID唯一性,不能给多个DOM设置同一个ID.即不能通过ID选择器去控制多个DOM节点.虽然在测试代码
     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="utf-8">
     6         <title>ID选择器</title>
     7         <style type="text/css">
     8             #bgbox{
     9                 background-color: #0000FF;
    10             }
    11         </style>
    12     </head>
    13 
    14     <body>
    15         <div id="bgbox" style="width: 100px;height: 100px;"></div>
    16         <div id="bgbox" style="width: 200px;height: 100px;"></div>
    17     </body>
    18 
    19 </html>

    发现两个div都被设置上了颜色,但是这是不符合规范的。ID必须能够唯一的确定DOM节点!!

  2. 在编写样式时尽量使用类选择器,即使该DOM节点可能只出现一次。因为ID选择器的优先级比类选择器高,在后期样式的控制中会越来越难控制。也许有人会问:我可不可以全篇都使用ID选择器,那么就不存在和类选择器比较优先级了。理论上这是可以的,但是请注意上一点——ID必须能够唯一的确定DOM节点。如果你全篇都使用ID选择器,那么即使两个DOM节点样式完全相同,那么你也必须把节点样式写两遍, 如果后期要进行维护,那么你必须对两处的代码都进行维护!!!极大的增加了维护的成本。
  3. 既然有了类选择器为什么还要规定一个ID选择器?在一个完整的HTML+CSS+javascript的页面体系中,对一个DOM节点的ID使用最多的其实是JavaScript(因为通过ID能唯一的确定DOM节点,方便控制),CSS中的使用的ID选择器一般情况下只会添加少量样式,更多对DOM节点的样式控制都是使用类选择器,既能够产生样式叠加,又方便后期的维护。请尽量避免在CSS中使用大量的ID选择器
  4. 常规情况下,CSS中会出现大量的ID选择器的情况——JavaScript插件配套的样式表中。

以上是关于ID选择器和类选择器的合理使用的主要内容,如果未能解决你的问题,请参考以下文章

课时70.id选择器和类选择器(理解)

标记选择器,类选择器,id选择器,伪类选择器的优先级顺序

css选择器的类型及作用

Web全栈-id选择器和类选择器

日期选择器和时间选择器的问题

选择器 导航制作相关