版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/55804090
伪类
link 未访问的链接
visited 已访问的链接
hover 鼠标移到元素上
active 向被激活的链接添加样式
focus 获得输入焦点的元素
first-child 作为某元素的第一个子元素的元素
lang 向带有指定lang属性的元素添加样式
提示：
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
<html>
<head>
<style type="text/css">
a:link{
color:green;
background-color:#ccc;
}
</style>
</head>
<body>
<p>这是一个<a href="#">段落</a></p>
</body>
</html>效果如下： 
focus
用于有焦点的元素。比如输入框和链接。但并不是所有元素都有焦点
<html>
<head>
<style type="text/css">
input:focus{
background-color:blue;
}
</style>
</head>
<body>
<input type="input">
</body>
</html>first-child
如果一个A元素在另一个元素B当中，并且A是B的第一个子元素，那么可以控制A的样式
必须声明 才能在 IE 中生效。
<html>
<head>
<style type="text/css">
p:first-child{
color:blue;
}
</style>
</head>
<body>
<div>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
</div>
</body>
</html>效果图： 
伪元素
first-line / :irst-letter
对文本的首行(首字母)应用样式
p:first-line{
background-color:green;
}这样的效果是： 
before / after
可以在元素的内容前面（后面）插入新内容
<style type="text/css">
h1:before {content:url(http://i1.piimg.com/584041/f052aa9790db915b.png);}
</style>效果如下： 
quotes : ‘String’ ‘String’ ‘String’ ‘String’
规定引号的类型,前两个表示第一层引用的符号，后两个表示第二层引用的符号。
使用时用<q></q>表示引号出现的位置。
<head>
<style type="text/css">
q:lang(en)
{
quotes: '@' '#' "'" "'"
}
</style>
</head>
<body>
<p><q>This is a <q>big</q> quote.</q></p>
</body>结果是：@This is a ‘big’ quote.#
