Home >Web Front-end >HTML Tutorial >W3School-CSS 伪类 (Pseudo-classes) 实例_html/css_WEB-ITnose
W3School-CSS 伪类 (Pseudo-classes) 实例_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:381359browse
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="love.jpg" 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) 总结
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：如图所示的时间表，一般是怎么实现的？_html/css_WEB-ITnoseNext article：W3School-CSS 伪元素 (Pseudo-elements) 实例_html/css_WEB-ITnose