009 複合選擇器

時間 2019-12-07

標籤複合選擇器简体版

原文原文鏈接

一：後代選擇器html

1.描述spa

　　使用空格隔開3d

2.案例code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div p{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <!-- 後代選擇器-->
14     <!-- 把全部的網選出來 -->
15     <div>hvjj</div>
16     <div>hvjj</div>
17     <div>hvjj</div>
18     <div>
19         <p>網</p>
20     </div>
21     <div>
22         <p>網</p>
23     </div>
24     <p>66</p>
25     <p>77</p>
26 </body>
27 </html>

3.效果htm

二：子代選擇器blog

1.只對子代其做用it

　　使用>class

2.案例meta

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         ul li > a{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <ul>
14         <li>
15             <a href="#">一級菜單</a>
16         </li>
17         <div>
18             <a href="#">二級菜單</a>
19             <a href="#">二級菜單</a>
20             <a href="#">二級菜單</a>
21         </div>
22     </ul>
23 </body>
24 </html>

3.效果im

三：交集選擇器

1.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div.red{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <div class="red">123456</div>
14     <div>123456</div>
15     <div>123456</div>
16     <p class="red">123456</p>
17     <p>123456</p>
18     <p>123456</p>
19 </body>
20 </html>

2.效果

四：並集選擇器

1.描述

　　使用逗號隔開

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div,span{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>123456</div>
14     <div>123456</div>
15     <div>123456</div>
16     <p>123456</p>
17     <p>123456</p>
18     <p>123456</p>
19     <br>
20     <span>123456</span><br>
21     <span>123456</span><br>
22     <span>123456</span><br>
23     <span>123456</span><br>
24     <a href="#">123456</a>
25 </body>
26 </html>

3.效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。