Rumah >hujung hadapan web >html tutorial >W3School-CSS 伪类 (Pseudo-classes) 实例_html/css_WEB-ITnose
W3School-CSS 伪类 (Pseudo-classes) 实例_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal
- 2016-06-24 11:28:381416semak imbas
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/imghwm/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) 总结
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如图所示的时间表，一般是怎么实现的？_html/css_WEB-ITnoseArtikel seterusnya：W3School-CSS 伪元素 (Pseudo-elements) 实例_html/css_WEB-ITnose