css/伪类和伪元素.html

<!DOCTYPE html>
<html>
<head>
	<title>伪类和伪元素</title>
	<style type="text/css">
		input:read-only{
			background-color: #ccc;
		}

		span[data-descr] {
			position: relative;
			text-decoration: underline;
			color: #00F;
			cursor: help;
		}

		span[data-descr]:hover::after {
			content: attr(data-descr);
			position: absolute;
			left: 0;
			top: 24px;
			min-width: 200px;
			border: 1px #aaaaaa solid;
			border-radius: 10px;
			background-color: #ffffcc;
			padding: 12px;
			color: #000000;
			font-size: 14px;
			z-index: 1;
		}
	</style>
</head>
<body>
	<p>伪类</p>
	<p>伪类是添加到选择器的关键字，指定要选择的元素的特殊状态</p>
	<div>
		<input type="text" name="">
	</div>
	<p>伪元素</p>
	<p>伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。</p>
	<p>伪元素默认是行内元素（display:inline-block）</p>
	<div>
		我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
		<span data-descr="small popups which also hide again">提示</span>。<br />
		把鼠标放上去<span data-descr="not to be taken literally">看看</span>.
	</div>
</body>
</html>