首页 > 代码库 > css多类选择器

css多类选择器


 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     <style type="text/css"> 5     .a.b{                            /*注意此处.a和.b之间没有空格*/ 6     background-color:blue; 7     } 8     .a{ 9         border:1px solid black;10     }11     .b{12         color:red;13     }14     </style>15 </head>16 17 </head>18     <body>19         <div style="width:100px;height:100px;"class="a b"> 20                                          /*此div 显示 红字蓝背景黑框*/21             12322         </div>23         <div style="width:200px;height:200px;" class="a">24                                      /*此div仅显示黑框*/25             12326             <div style="width:100px;height:100px;" class="b">27                                    /*此div仅显示红字*/28                 12329             </div>30         </div>31     </body>32 </html>

在css选择器中如果两个类之间没有空格,这表示这是个多类选择器;如果有空格就表示选择第一个类中的第二个类。

css多类选择器