三、复合选择器
1、后代选择器
demo1
demo2
demo3
2、子选择器
3、并集选择器
元素1, 元素2 { 样式声明 }
- 用于选择多组标签. (集体声明)
- 通过 逗号 分割等多个元素.
- 表示同时选中元素 1 和 元素 2
- 任何基础选择器都可以使用并集选择器.
- 并集选择器建议竖着写.每个选择器占一行. (最后一个选择器不能加逗号）
栗子
4、链接伪类选择器
1) 链接伪类选择器
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
如何让一个已经被访问过的链接恢复成未访问的状态?
清空浏览器历史记录即可. ctrl + shift + delete
注意事项
按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效. 记忆规则 "绿化"
浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.
实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多.
demo
<!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>Document</title> <!-- 任何基础选择器都可以使用并集选择器 --> <style> a:link { color: black; /* 去掉 a 标签的下划线 */ text-decoration: none; } a:visited { color: green; } a:hover { color: red; } a:active { color: blue; } </style> </head> <body> <!-- <!可以是任意基础选择器的组合. (包括类选择器, id 选择器) --> <div class="cat"> <ul> <li>java</li> <li>c++</li> <li>go</li> </ul> </div> <a href="https://blog.csdn.net/weixin_61061381?spm=1000.2115.3001.5343"> 这是一个超链接</a> <p> 这是一个段落标签 </p> <h1>一级标题</h1> </body> </html>
2)force伪类选择器
5、复合选择器小结
