- ##### 伪类选择器
- 常用伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 所有伪类都是以冒号(:)开头 *: // 通配 :hover // 鼠标经过时的状态 :link // 正常状态 :active // 点击时的状态 :visited // 点击之后的状态 */ .box { width: 100px; height: 100px; border: 1px solid red; } .box:hover { border-radius: 50%; background-color: yellow; } </style> </head> <body> <div class="box"></div> </body> </html>————————————————版权声明：本文为CSDN博主「卡尔特斯」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/zz00008888/article/details/132978110
- 结构伪类
```
ul>li{$}35 ```
- empty伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; margin-top: 20px; margin-left: 20px; border: 1px solid green; } /* 如果div是空的就会被设置背景颜色 */ div:empty { background-color: yellow; } </style> </head> <body> <div></div> <div> <span>dzm</span> </div> </body> </html>
- target伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* :target 伪类 要配合锚点使用，表示被激活的状态 */ #box:target { background-color: red; } </style> </head> <body> <a href="#box">锚点定位标题</a> <div id="box">标题</div> </body> </html>
