复合选择器

Posted on 2022-01-26 23:42  AcTourist  阅读(80)  评论(0)    收藏  举报

一、分类

　　1.后代选择器

　　2.子选择器

　　3.并集选择器

　　4.伪类选择器

二、后代选择器

　　1.样例

 

　　实现效果：

　　理解：1.格式 元素一 （空格） 元素二{属性值} 

三、子选择器

　　1.样例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>复合选择器之子选择器</title>
 8     <style>
 9         .nav>a {
10             color: red;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="nav">
16         <a href="#"> 我是儿子</a>
17         <p>
18             <a href="#"> 我是孙子</a>
19         </p>
20     </div>
21 </body>
22 </html>

　　2.效果如下

　　3.理解：就近原则，选择最近的，与后代选择器区别在与 用的 > 这个符号

四、并集选择器

　　1.样例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>复合选择之并集选择器</title>
 9     <style>
10         /* 熊大和熊二改为粉色
11         div,
12         p {
13             color: pink;
14         } */
15 
16         /* 熊大和熊二改为粉色，同时佩奇一家改为粉色 */
17         div,
18         p,
19         .pig {
20             color: pink
21         }
22     </style>
23 </head>
24 
25 <body>
26     <div>熊大</div>
27     <p>熊二</p>
28     <span>光头强</span>
29     <ul class=" pig">
30         <li>猪妈妈</li>
31         <li>猪爸爸</li>
32         <li>小猪佩奇</li>
33     </ul>
34 </body>
35 
36 </html>

　　2.效果如下

 

　　3.理解：可以选多组进行同种属性值，注意每组之间需要用逗号隔开

五、伪类选择器--链接伪类

　　1.样例

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>伪类链接</title>
 8     <style>
 9         /* 未访问链接 a:link 没有点击过的链接显示出来 */
10         a:link{
11             color: #333;
12             text-decoration: none;
13         }
14         /* 已访问过链接 a:visited 访问过的链接显示出来啊 */
15         a:visited{
16             color: orange;
17         }
18         /* 鼠标位于链接其上 a:hover 鼠标经过显示出来 */
19         a:hover{
20             color: pink;
21         }
22         /* 按下鼠标，并没有松开鼠标 a:active 进行变色*/
23         a.active{
24             color: green;
25         }
26     </style>
27 </head>
28 <body>
29     <a href="https://www.baidu.com">百度</a><br>
30     <a href="#">已点击过链接</a>
31     <a href="www.xxxx.com">未点击过链接</a>
32 </body>
33 </html>

　　2.效果如下

 

　　3.理解：注意一定要按着顺序写，link visited hover active 不可以越界

六、伪类选择器--focus

　　1.样例

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>focus伪类选择器</title>
 8     <style>
 9         input:focus{
10             background-color: yellow;
11             color: red;
12         }
13     </style>
14 </head>
15 <body>
16     <input type="text">
17 </body>
18 </html>

　　2.效果如下　　

 

　　3.理解：与input类的表单元素获取。

七、思维导图