W3School-CSS 伪类 (Pseudo-classes) 实例_html/css_WEB-ITnose
CSS 伪类 (Pseudo-classes) 实例
CSS 实例
01超链接
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>01超链接</title> <style type="text/css"> body { background-color: #99CCFF; } a:link { color: #CCCCCC; } a:visited { color: #666666; } a:hover { color: #ffffff; } a:active { color: #999999; } </style> </head> <body> <p><b><a href="https://www.baidu.com/" target="_blank">百度首页</a></b></p> <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p> <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p> <img src="/static/imghw/default1.png" data-src="love.jpg" class="lazy" alt="W3School-CSS 伪类 (Pseudo-classes) 实例_html/css_WEB-ITnose" > </body></html>登录后复制
02超链接2
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>02超链接2</title> <style type="text/css"> body { background-color: #99ccff; } a.one:link {color: #666;} a.one:visited {color: #333;} a.one:hover {color: #ffffff;} a.two:link {color: #666;} a.two:visited {color: #333;} a.two:hover {font-size: 150%;} a.three:link {color: #666;} a.three:visited {color: #333;} a.three:hover {background-color: #CCCCCC;} a.four:link {color: #666;} a.four:visited {color: #333;} a.four:hover {font-family: monospace;} a.five:link {color: #666;text-decoration: none;} a.five:visited {color: #333;text-decoration: none;} a.five:hover {text-decoration: underline;} </style> </head> <body> <p><b><a class="one" href="https://www.baidu.com/" target="_blank">改变颜色</a></b></p> <p><b><a class="two" href="https://www.baidu.com/" target="_blank">改变字体大小</a></b></p> <p><b><a class="three" href="https://www.baidu.com/" target="_blank">改变背景颜色</a></b></p> <p><b><a class="four" href="https://www.baidu.com/" target="_blank">As a man thinketh in his heart so is he！改变字体</a></b></p> <p><b><a class="five" href="https://www.baidu.com/" target="_blank">改变文本装饰</a></b></p> </body></html>登录后复制
03超链接：:focus 的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>03超链接：:focus 的使用</title> <style type="text/css"> input:focus { background-color: #ccc; } </style> </head> <body> <form> <p>First name: <input type="text" /> </p> <p>Last name: <input type="text" /> </p> <p> <input type="submit" value="Submit" /> </p> </form> </body></html>登录后复制
04 :first-child（首个子对象)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>04:first-child（首个子对象）</title> <style type="text/css"> p:first-child { color: green; } li:first-child { text-transform: uppercase; } </style> </head> <body> <div> <p>These are the necessary steps:</p> <ul> <li>Intert Key</li> <li>Turn key <strong>clockwise</strong></li> <li>Push accelerator</li> </ul> <p>Do <em>not</em> push the brake at the same time as the accelerator.</p> </div> </body></html>登录后复制
05 :lang（语言)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>05 :lang（语言）</title> <style type="text/css"> q:lang(no) { quotes: "~" "~"; } </style> </head> <body> <p>:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型：</p> <p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p> </body></html>登录后复制
CSS 伪类 (Pseudo-classes) 总结
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
3 周前
By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前
By DDD
威尔R.E.P.O.有交叉游戏吗？
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
HTML容易为初学者学习吗？
Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
HTML中起始标签的示例是什么？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
