CSS组合选择器

 

 1 <!DOCTYPE html>
 2 <html lang="ch-zn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="css03.css">
 7 </head>
 8 <body>
 9     <div id="parent">
10         <p>&nbsp;我是全文档中第一个div中的段落标签</p>
11         <p>&nbsp;我是全文档中第二个div中的段落标签</p>
12         <div id="sun">
13             <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是span标签，我嵌套在两层div标签里</span>
14         </div>
15         <p id="broth1">&nbsp;&nbsp;&nbsp;&nbsp;我是p标签老大，我在一层div中，我下面还有三个弟弟</p>
16         <p>&nbsp;&nbsp;&nbsp;&nbsp;我是p标签老二，我在一层div中，我们家族是四兄弟</p>
17         <p>&nbsp;&nbsp;&nbsp;&nbsp;我是p标签老三，我在一层div中，我上有两个同级的哥哥，下有一个同级的弟弟</p>
18         <p>&nbsp;&nbsp;&nbsp;&nbsp;我是p标签老四，我在一层div中，我是家族里最小的弟弟</p>
19     </div>
20     <p>我不在任何div中 我是段落标签一</p>
21     <div>
22         <p>&nbsp;我是全文档中第三个div中的段落标签</p>
23     </div>
24     <p>我不在任何div中 我是段落标签二</p>
25 
26 </body>
27 </html>

 

css03.css
 1 /*毗邻选择器  例如：所有和div标签毗邻而居的p标签*/
 2 div+p {
 3     color: red;
 4 }
 5 
 6 
 7 /*弟弟选择器  例如 内层div其后的属于同级的4个p标签*/
 8 #sun~p {
 9     color: blue;
10 }
11 
12 
13 
14 
15 /*后代选择器*/
16 div p {
17     color: green;
18 }
19 div div {
20     color: green;
21 }
22 
23 
24 /*儿子选择器*/
25 div>div {
26     color: yellow;
27 }

 

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