<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器以及伪元素</title>
<style>
/*:root 选择器匹配文档根元素。设置 HTML 文档的背景色：*/
:root{ background:#036;}
body{ background:#fff;}
p.aaas{ text-align:left; color:#c00;}
p.right{ text-align:right; color:#0F0;}
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */
p:first-line{ color:#f60; background:#F00;}
p:first-letter{ color:#0F3; font-size:18px;}
li{ list-style:none;}
li:before{ content:"[前面]"; color:#00F;}
li:after{ content:"[后面]"; color:#6F3;}
</style>
</head>
<body>
<h1>类选择器</h1>
<p class="aaas">伪类选择器以及伪元素</p>
<p class="right">伪类选择器以及伪元素</p>
<br/>
<a href="###" target="_blank">伪类选择器</a>
<br/>
<p>
在CSS中，主要有四个伪元素选择器<br/>
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
</p>
<ul>
<li><a href="###">伪类选择器</a></li>
<li><a href="###">伪类选择器</a></li>
<li><a href="###">伪类选择器</a></li>
<li><a href="###">伪类选择器</a></li>
<li><a href="###">伪类选择器</a></li>
<li><a href="###">伪类选择器</a></li>
<li><a href="###">伪类选择器</a></li>
</ul>
</body>
</html>
效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>not选择器</title>
<style>
:root{ background:#3F0;}
body *:not(h1){ background:#fff;}
:empty{ background:#f60;}
</style>
</head>
<body>
<h1>not选择器</h1>
<p>阅谁问君诵，水落清香浮。</p>
<br/>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td></td>
<td>4</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td></td>
</tr>
</table>
</body>
</html>
效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器first-child、last-child、nth-child和nth-last-child</title>
<style>
/*
li:first-child{ background:#f60;}
li:last-child{ background:#f60;}
li:nth-child(odd){ background:#0C6;}
li:nth-child(even){ background:#0C6;}
li:nth-child(3n+1){ background:#f60;}
li:nth-child(3n+2){ background:#f60;}
li:nth-child(4n+1){ background:#f60;}
li:nth-child(4n){ background:#f60;}
*/
li:only-child{ background:#00F;}
</style>
</head>
<body>
<h1>选择器</h1>
<h1>唯一的</h1>
<ul>
<li>第一个项目</li>
</ul>
<h1>很多的</h1>
<ul>
<li>第一个项目</li>
<li>第二个项目</li>
<li>第三个项目</li>
<li>第一个项目</li>
<li>第一个项目</li>
<li>第一个项目</li>
<li>第二个项目</li>
<li>第三个项目</li>
<li>第一个项目</li>
<li>第一个项目</li>
</ul>
</body>
</html>
效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
:target 选择器可用于选取当前活动的目标元素。
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。
这个被链接的元素就是目标元素(target element)。
*/
:target{ background:#000; color:#fff;}
</style>
</head>
<body>
<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<div id="A">
<h2>标题</h2>
<p>内容.........</p>
</div>
<div id="B">
<h2>标题</h2>
<p>内容.........</p>
</div>
<div id="C">
<h2>标题</h2>
<p>内容.........</p>
</div>
<div id="D">
<h2>标题</h2>
<p>内容.........</p>
</div>
</body>
</html>
?效果图：
?
?
?
原文：http://onestopweb.iteye.com/blog/2262507