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>
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>
三、并集选择器
并集选择器以逗号分隔,每个选择器可以是任意基础选择器
写法如下:
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>
四、伪类选择器
概念:伪类选择器用于向某些选择器添加特殊的效果。
格式: 冒号表示。
例子:连接伪类选择器
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>
注意:
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>
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14992801.html