CSS选择器的分组和嵌套

 

 1 <!DOCTYPE html>
 2 <html lang="ch-zn">
 3 <head>
 4     <title>Title</title>
 5     <meta charset="UTF-8">
 6     <link rel="stylesheet" href="css05.css">
 7 </head>
 8 <body>
 9     <div id="parent">
10         <div id="sun1">
11             <span>&nbsp;&nbsp;&nbsp;&nbsp;内二层span标签1</span>
12             <p>&nbsp;&nbsp;&nbsp;&nbsp;内二层段落标签</p>
13             <span>&nbsp;&nbsp;&nbsp;&nbsp;内二层span标签2</span>
14             <span>&nbsp;&nbsp;&nbsp;&nbsp;内二层span标签4</span>
15         </div>
16         <p id="sun2">&nbsp;&nbsp;内一层段落标签1</p>
17         <span id="sun3">我是内一层的span标签</span>
18         <p id="sun4">&nbsp;&nbsp;内一层段落标签2</p>
19     </div>
20 
21 </body>
22 </html>

css05.css
 1 /*嵌套使用选择器 即有id选择器 也有标签选择器 父子关系组合 嵌套在一起*/
 2 
 3 #sun1>p {
 4     color: green;
 5 }
 6 
 7 #parent>div {
 8     color: darkmagenta;
 9 }
10 
11 /*分组选择器 推荐分行写,但是要注意一定要加逗号  因为缺失逗号 就变成空格关系 --> 后代选择器*/
12 #sun2, sun3, #sun4 {
13     color: darkorange;
14 }

 

posted @ 2020-04-10 09:31  CherryYang  阅读(520)  评论(0)    收藏  举报