四、复合选择器 ( 重要 )
1. 后代选择器
元素1 元素2 { 设置样式 }
注意：
① 只对元素2 进行设置样式，不影响元素1
② 元素1 是父级，元素2 可以是子级，或孙子级，或重孙子级…
③ 元素1 和 元素2 可以是标签选择器、类选择器、id 选择器…
展示1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo8</title> <style> ul p{ color: red; } .aaa li { color: green; } </style> </head> <body> <ul> <li>卡布达</li> <li>卡布达</li> <li> <p>呱呱蛙</p> </li> </ul> <ol class="aaa"> <li>呱呱蛙</li> <li>呱呱蛙</li> <li>呱呱蛙</li> </ol> </body> </html>
展示结果：
2. 子选择器
元素1>元素2 { 设置样式 }
注意：
① 元素2 只能是 元素1 的子级，不能是元素1 的孙子级…也就是说，两者只能选择并列的一级关系，不能跳级。
② 其他的语法和后代选择器相似。
展示1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo9</title> <style> ul>li>p { color: green; } ol>div { color: green; } </style> </head> <body> <ul class="bbb"> <li>卡布达</li> <li>卡布达</li> <li> <p>呱呱蛙</p> </li> </ul> <ol class="aaa"> <li>呱呱蛙</li> <li>呱呱蛙</li> <li> <div>呱呱蛙</div> </li> </ol> </body> </html>
展示结果：
展示2
将卡布达改成红色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo11</title> <style> .bbb>a { color: red; } </style> </head> <body> <div class="bbb"> <a href="#">卡布达</a> <ul> <li><a href="#">金龟次郎</a></li> <li><a href="#">金龟次郎</a></li> </ul> </div> </body> </html>
展示结果：
注意
不管是使用后代选择器还是子选择器，最好通过逐级的方式来设置样式，因为这样更加清楚。如果跳级，在代码量少的情况下当然也可以做到，但在代码量多的情况下容易混淆。
3. 并集选择器
元素1, 元素2 { 设置样式 }
元素1 和 元素2 可以是基础选择器，亦可以是复合选择器。
展示1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo12</title> <style> p,div,ol>li>div { color: red; } </style> </head> <body> <p>卡布达</p> <div>呱呱蛙</div> <ol> <li>车轮滚滚</li> <li>车轮滚滚</li> <li> <div>车轮滚滚</div> </li> </ol> </body> </html>
展示效果：
5. 伪类选择器
(1) 链接伪类选择器
a:link 未被访问过的链接 a:visited 已经被访问过的链接 a:hover 鼠标指针悬停上的链接 a:active 活动链接(鼠标长按链接了但是未弹起)
展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo13</title> <style> a { font-size: 30px; } a:link { color: black; } a:visited { color: green; } a:hover { color: red; } a:active { color: gray; } </style> </head> <body> <a href="https://www.sogou.com/" target="_blank">点击访问搜狗</a> </body> </html>
展示结果：
(2) 焦点伪类选择器
input:focus { 设置样式 }
展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo14</title> <style> div>input { font-size: 30px; } input:focus { color: red; } </style> </head> <body> <div> <input type="text"> <input type="text"> <input type="text"> </div> </body> </html>
只有在某个文本框输入的时候，当前才会具有红色并放大的效果。
展示结果：
五、字体属性
展示1 字体样式
font-family: '宋体'; font-family: '微软雅黑'; ... ...
字体样式建议使用大众用户常见的字体，这样就会更加兼容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo15</title> <style> body>.aaa{ font-family: '宋体'; } body>.bbb{ font-family: '微软雅黑'; } </style> </head> <body> <div class="aaa">卡布达</div> <div class="bbb">卡布达</div> </body> </html>
展示结果：
展示2 字体大小
字体大小在前面的代码中有提到，这里不再赘述，使用 font-size.
展示3 字体粗细
font-weight: bold / normal (常用)
和字体大小一样，字体粗细可以使用数值表示，也可以使用英文字母代替值。
常用的是
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo16</title> <style> .aaa { font-weight: bold; } .bbb { font-weight: normal; } </style> </head> <body> <div class="aaa">卡布达</div> <div class="bbb">卡布达</div> </body> </html>
展示结果：
展示4 字体倾斜
font-style: normal / italic
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo17</title> <style> .aaa { font-style: normal; } .bbb { font-style: italic; } .ccc>em { font-style: normal; } </style> </head> <body> <div class="aaa">卡布达</div><br/> <div class="bbb">呱呱蛙</div><br/> <div class="ccc"> <em>飞翔机器人</em> </div> </body> </html>
将 font-style 设置成 normal，这可以将 html 中的 em 标签消除倾斜效果 ( 因为在 html 的语法中，em 标签就是表示倾斜的意思 )
展示结果：
六、文本颜色
认识 RGB
在 CSS 中，理解 RGB 十分关键。
RGB：Red, Green, Blue. 光学三原色（RGB）：红、绿、蓝
颜料三原色（CMYK）：红、黄、蓝
① 毋庸置疑，CSS 采用的是光学三原色，而不是颜料三原色。
② CSS 中，针对 R, G, B 三个分量，各使用一个字节表示 (8个比特位，表示的范围是 0 - 255，十六进制表示为 00 - FF)
③ 数值越大，表示该分量的颜色就越浓。( 255, 255, 255 ) 表示白色，( 0, 0, 0 ) 表示黑色。
展示1
针对 color 这个属性，我们可以使用以下几种设置颜色的方法：
① 通过 rgb 设置颜色
② 通过 指定英文 设置颜色
③ 通过 调色板 设置颜色
④ 通过 十六进制 设置颜色
在上面的四种用法中，rgb 的用法是较为广泛的。因为我们使用 CSS 的最终目的是为了让页面好看，可能大多时候，需要美工事先设计好，我们再根据 rgb 的三个要素往里填。
而关于 rgb 的三个要素，小伙伴可以自己使用 VS Code 或 IDEA 这样的编译器试一试调配的结果，还是很有意思的。在日常使用的 QQ截图 中，当我们使用鼠标在扫描的过程中，就精准地出现了 rgb 这三个要素值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo18</title> <style> .aaa { color: rgb(255, 0, 0); } .bbb { color: green; } .ccc { color: #0000ff; } </style> </head> <body> <div class="aaa">卡布达</div> <br/> <div class="bbb">金龟次郎</div> <br/> <div class="ccc">蟑螂恶霸</div> </body> </html>
展示结果：
展示2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo18</title> <style> .bbb { font-size: 30px; color: rgb(42, 107, 205); background-color: rgba(255, 0, 0, 0.2); } </style> </head> <body> <div class="bbb">卡布达</div> </body> </html>
① rgba 中的 a：alpha，第四位，即透明度的意思，范围为：0 - 1.
② 0 为全透明；1 为不透明。
③ rgb 和 rgba 的用法相似，支持设置的方法有很多。
展示结果：
