W3School-CSS 伪类 (Pseudo-classes) 实例

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) 总结

posted @ 2016-01-23 15:33  IamHoey  阅读(368)  评论(0)  编辑  收藏  举报