CSS 伪类 (Pseudo-classes) 实例
CSS 实例
- CSS 背景实例
- CSS 文本实例
- CSS 字体(font)实例
- CSS 边框(border)实例
- CSS 外边距 (margin) 实例
- CSS 内边距 (padding) 实例
- CSS 列表实例
- CSS 表格实例
- 轮廓（Outline)实例
- CSS 尺寸 (Dimension) 实例
- CSS 分类 (Classification) 实例
- CSS 定位 (Positioning) 实例
CSS 伪类 (Pseudo-classes)实例- CSS 伪元素 (Pseudo-elements)实例
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">
</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) 总结
