CSS学习笔记(一)-5.复合选择器

学习视屏：https://www.bilibili.com/video/BV14J4114768

复合选择器就是基础选择器的组合

 

一、.后代选择器

后代选择器即父选择器选择子选择器或则孙子选择器。总之，选择后代。

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 22:15:39
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 22:38:24
 7  * @Description: 
 8  * @FilePath: \CSS2\08-CSS复合选择器.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>08-CSS复合选择器</title>
18     <style>
19         ul li {
20             color: red;
21         }
22         
23         ul li a {
24             color: pink;
25         }
26         
27         .test1 li a {
28             color: blue;
29         }
30     </style>
31 </head>
32 
33 <body>
34     <ul>
35         <li>1</li>
36         <li>2</li>
37         <li>3</li>
38         <li><a href="#">4</a></li>
39     </ul>
40     <ol>
41         <li>5</li>
42         <li>6</li>
43         <li>7</li>
44         <li>8</li>
45     </ol>
46     <ul class='test1'>
47         <li>9</li>
48         <li>10</li>
49         <li>
50             <a href="#">11</a>
51         </li>
52     </ul>
53 </body>
54 
55 </html>
View Code

1. ul li { color:xxx;} 父选择器和子选择器中间使用空格隔开。

2 ul li a { color: xxxx;}父选择器后面可以跟孙选择器。也是已空格隔开。

3 .test1 ul li {color:xxx;} 父选择器和子选择器，孙选择器 都是基础选择器。

 

二、子选择器

子选择器就只能选择儿子，不能选择孙子

写法如下：使用大于号。

.nav>a {color: pink;}

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 22:15:39
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 22:48:17
 7  * @Description: 
 8  * @FilePath: \CSS2\08-CSS复合选择器.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>08-CSS复合选择器</title>
18     <style>
19         .nav a {
20             color: red;
21         }
22         
23         .nav>a {
24             color: pink;
25         }
26     </style>
27 </head>
28 
29 <body>
30     <div class="nav">
31         <a href="#">我是儿子</a>
32         <p>
33             <a href="#">我是孙子</a>
34         </p>
35     </div>
36 </body>
37 
38 </html>
View Code

 

三、并集选择器

并集选择器以逗号分隔，每个选择器可以是任意基础选择器

写法如下：

div,
p,
ul li {color: pink;}
 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>19并集选择器</title>
 8     <style>
 9         div,
10         p,
11         ul li {
12             color: pink;
13         }
14     </style>
15 </head>
16 <body>
17     <div>div</div>
18     <p>p</p>
19     <ul>
20         <li>li1</li>
21         <li>li2</li>
22         <li>li3</li>
23     </ul>
24     
25 </body>
26 </html>
View Code

 

四、伪类选择器

概念：伪类选择器用于向某些选择器添加特殊的效果。

格式： 冒号表示。

例子：连接伪类选择器

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-06-02 22:34:46
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 23:03:35
 7  * @Description: 
 8  * @FilePath: \css\20-伪类选择器.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>20伪类选择器</title>
18     <style>
19         /* <!-- a:link 选择所有未被访问的连接 --> */
20         
21         a:link {
22             color: blue;
23             text-decoration: none;
24         }
25         /* <!-- a:visited 选择所有已被访问的连接 --> */
26         
27         a:visited {
28             color: red;
29         }
30         /* <!-- a:hover 选择鼠标位于连接之上时的显示 --> */
31         
32         a:hover {
33             color: green;
34         }
35         /* <!-- a:active 选择活动链接（鼠标按下还未弹起时的样式） --> */
36         
37         a:active {
38             color: blueviolet
39         }
40         /* LVHA 的顺序来书写样式 */
41     </style>
42 </head>
43 
44 <body>
45     <a href="#">超级晒咬人</a>
46     <a href="https://www.baidu.com">baidu</a>
47 
48 
49 
50 
51 </body>
52 
53 </html>
View Code

注意：

1.按照LVHA 的顺序来写。（LoVeHAte）

2.a连接的样式得单独写

3.一般就是个a一个样式，然后使用a:hover

 

五、focus伪类选择器

 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>21.:focus伪类选择器</title>
 9     <style>
10         /* 以下只对.top class中的聚焦有样式 */
11         /* 一般都针对Input标签 */
12        .top input:focus {
13             color: red;
14             background-color: green;
15         }
16 
17         /* 以下对所有input的聚焦都有样式 */
18         input:focus {
19             color: pink;
20             background-color: blue;
21         }
22     </style>
23 </head>
24 
25 <body>
26     <div class='top'>
27         <input type="text" value='点我'>
28         <input type="text" value='点我'>
29         <input type="text" value='点我'>
30     </div>
31 
32     <input type="text" value='1'>
33     <input type="text" value='2'>
34     <input type="text" value='3'>
35 </body>
36 
37 </html>
View Code

 

 

 

 

 

 

 

 

posted @ 2021-07-09 23:13  kaer_invoker  阅读(53)  评论(0)  编辑  收藏  举报