css3伪类
1.css3伪类之锚伪类
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
伪类可以与 CSS 类配合使用：这点很重要
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
2.
:first-child 伪类
:first-child 伪类来选择元素的第一个子元素。
<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>
【css】
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
这样第一个p标签的文本显示粗体
第一个li标签的文本显示大写字母
本伪类在IE下有问题
看三个例子
<html>
<head>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body>
<p>some text</p>
<p>some text</p>
</body>
</html> 第一个p里的文本显示红色
<html>
<head>
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html> 所有p里的第一个i都应用这个CSS样式
<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html> 第一个p里的所有i都应用这个样式
可以这么理解：谁离伪类最近，“第一”就对谁起作用！
3.
:lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>
4.
:first伪类
设置页面容器第一页使用的样式。仅用于 @page 规则
@page :first { margin: 4cm }
5.:left
设置页面容器位于装订线左边的所有页面使用的样式。仅用于 @page 规则。
@page :left { margin: 4cm }
6.
:right 伪类
设置页面容器位于装订线右边的所有页面使用的样式。仅用于 @page 规则。
@page :right { margin: 4cm }
7.
:focus伪类 仅使用于IE
设置对象在成为输入焦点(该对象的 onfocus 事件发生)时的样式。
比如：
<style type="text/css">
a:focus:hover{background:#000;}
</style>
<a href="#">点击</a>
当鼠标触发时背景色就显示为黑色