【HTML/CSS】伪类选择器
这个也有意思
之前几天学的，现在写写刚好复习（
伪类选择器
伪类是什么？
伪类用于定义元素的特殊状态，比如鼠标悬浮在按钮上，按钮颜色会变就是一个例子。
链接伪类选择器
修改链接状态的选择器
点击查看-连接选择器-代码
<!DOCTYPE html> <html> <head> <title> 伪类选择器 </title> <style> /* 链接伪类选择器,可以修改状态 有顺序 L V H A */ a:link{ font-weight: bold; font-size: 20px; color: gray; } a:visited{ font-weight: bold; font-size: 20px; color: blueviolet; } a:hover{ font-weight: bold; font-size: 50px; color: red; } a:active{ font-weight: bold; font-size: 20px; color: orange; } </style> </head> <body> <a href="https://www.baid.com">BAIDU</a> </body> </html>
注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感。
目标伪类选择器
点击目录里一个链接就跳到相应内容的效果就靠它
点击查看-目标伪类选择器-代码
<!DOCTYPE html> <html> <head> <title> 目标伪类选择器 </title> <style> :target{ color: firebrick; } </style> </head> <body> <h2>menu</h2> <a href="#story">lubenwei</a> <a href="#NB">nb</a> <br> <pre> awerawe qwer qw er qwerqw er qwerr qwerqw er qwe f gs dfg sdf Gsg dghj awerawefe rf er fsre fw g wer Gewrg werg er Gewrggw erg werrg werrgh yt tuy j yu j yu j tuyjty uj tuyju dtyhrty <hgroup>rty jh rty jrt yj rtyj rtyjrt yjtyrj yjtrty jhrty jhrty jhrtyj rtyj </hgroup> rtyjjr tuyjty rtyjrty jhrtyrtyj rt yjtrtyrty jhrtyrtyj rtyjtry jhrtyrtyjj tiyu <kbd>yuik uyi l yluo <li>yuiklyu yu </li> </kbd> </pre> <h2 id="story">story</h2> <pre> LBWNB LBWNB LBWNB LBWNBLBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB LBWNB </pre> <h2 id="NB">nb</h2> <pre>nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb nbnbnbnbnb </pre> </body> </html>
建议保存代码然后用浏览器打开查看效果
结构伪类选择器
选择选取属于其父元素的某个子元素的选择器
点击查看代码
<!DOCTYPE html> <html> <head> <title> 结构伪类选择器 </title> <style> /* first-child 选取属于其父元素的首个子元素的选择器 last-child 选取属于其父元素的最后一子元素的选择器 nth-child 选取属于其父元素的第n个子元素的选择器 last-nth-child 选取属于其父元素的倒数第n个子元素的选择器 */ li{ font:bold 40px "微软雅黑"; } li:nth-child(odd){ color: darkgrey; } li:nth-child(even){ color: darkslategray; } li:first-child{ color: brown; } li:last-child{ color: cornflowerblue; } </style> </head> <body> <ul> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>123</li> </ul> </body> </html>
目前学到这里，有学新的了再更
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理