css复合选择器的使用规则

css复合选择器的使用规则

1. id嵌套class

   <p id="app" class="container"></p>
   
   #app.container{}
   

2. 一个元素标签使用多个class。

   <p class="app container"></p>
   
   // 注意没有空格，有空格代表样式嵌套
   .app.container {}
   

3. id标签内的class元素。

   <div id="app"><p class="container"></p></div>
   
   #app .container {}
   

4. 元素标签下的class。

   <p><span class="container"></span></p>
   p .container {}
   

5. 元素标签下的id。

   <p><span id="container"></span></p>
   p #container{}
   

6. class下的元素标签。

   <p class="container"><span>dd</span></p>
   .container span {}
   

7. id标签内的id标签

   <div id="app"><div id="cpp"></div></div>
   #app #cpp {}
   

8. 元素标签嵌套元素标签

   <p><span></span></p>
   p span {}
   

总结

• .class1 .class2{}（中间有空格）表示嵌套样式。
• .class1,class2{}表示两个类名通用一个样式。
• .class1.class2{}表示一个Html元素需要同时具备claa1和class2样式才会生效