CSS 之 伪类及伪元素
伪类和伪元素用起来非常的方便，在查阅资料及测试后整理下来。
一、伪类
CSS 伪类用于向某些选择器添加特殊的效果。伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。
伪类即 CSS 内植类，CSS 内部本身赋予它一些特性和功能，也就是不用再class=...或id=...就可以用伪类获取元素，当然也可以改变它的部分属性（如： a:link{color:#FF0000;}）。
| 属性 | 描述 | 通俗说明 | CSS |
|---|---|---|---|
| :active | 向被激活的元素添加样式。 | 用鼠标点击时，元素增加特效，鼠标松开时，特效消失。多用在按钮的点击上。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 元素获得焦点时，元素增加特效，失去焦点时，特效消失。多用在让点击之后的元素一直拥有某些样式，active做不到，可以用在<input>标签上。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 当鼠标悬浮在元素上方时，增加特效，鼠标离开元素时，特效消失。常与cursor属性同时使用，当属性值为pointer时，光标位于元素上方时会变成手型。cursor还有url属性，其为设置图片地址。 | 1 |
| :link | 向未被访问的链接添加样式。 | 链接点击之前添加某些样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 链接点击之后添加某些样式。 | 1 |
| :first-child | 向元素的第一个子元素添加样式。 | 对某元素的第一个子元素添加样式，常用在ol,ul下面的li，或者tr下面的td或th上等。 | 2 |
| :lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
测试Demo源码，如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style type="text/css"> div{ line-height:30px; } #divActive:active{ background-color:red; } #divHover:hover{ background-color:red; cursor:pointer; } #txtFocus:focus{ background-color:red; } div ul li:first-child{ background-color:red; } div a:link{ background-color:red; } div a:visited{ background-color:blue; } div a:visited{ background-color:blue; } div input:lang(fr){ background-color:red; } </style> </head> <body> <div id="divActive">测试Active</div> <div id="divHover">测试Hover</div> <div id="divFocus"><input id="txtFocus" type="text"></div> <div id="divFirst-child"> <ul> <li>老大</li> <li>老二</li> <li>老三</li> </ul> </div> <div><a href="#">超链接</a></div> <div> <input id="text" type="text" value="文本" lang="fr" /> </div> </body> </html>
二、伪元素
| 属性 | 描述 | 通俗说明 | CSS |
|---|---|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 | 1 | |
| :first-line | 向文本的首行添加特殊样式。 | 1 | |
| :before | 在元素之前添加内容。 | 在元素文档流前添加内容。常用于隐形的提示信息内容。 | 2 |
| :after | 在元素之后添加内容。 | 在元素文档流后添加内容。常用于隐形的提示信息内容。 | 2 |
注意：伪元素如果没有设置“content”属性，伪元素是无用的。如果不想设置内容，可以设置content属性为空引用 content:""。插入的内容在页面的源码里是不可见的，只能在css里可见。CSS继承规则适用于插入的元素，插入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。
以：before为例测试Demo代码，如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <style type="text/css"> input{ display: block; } body *:before{ content: "before"; color: red; } </style> </head> <body> <h1>HTML控件伪元素支持测试</h1> <input id="button" type="button" value="普通按钮" /> <input id="reset" type="reset" value="重置" /> <input id="submit" type="submit" value="提交" /> <input id="text" type="text" value="文本" lang="fr" /> <input id="file" type="file" value="文件" /> <input id="password" type="password" /> <input id="checkbox" type="checkbox" /> <input id="radioY" type="radio" name="sel" value="Yes" /> <input id="radioN" type="radio" name="sel" value="No" /> <div><input id="cbN" type="radio" name="sel" /></div> <input id="hid" type="hidden" /> <textarea id="txt" rows="2" cols="20"></textarea> <table style="width:100%;"><tr><td> </td><td> </td><td> </td></tr></table> <img id="img" src="" alt="图片" /> <select id="sel"> <option>请选择</option> </select> <hr /> <div id="div"></div> </body> </html>
1、插入非文本内容
我们可以把属性的值置为空字符串或是插入文本内容。还有如下几种非文本内容，如下：
[1]、可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的
[2]、当然，你可以包含一个Data URI代替图像引用，正如你可以用css背景一样。
[3]、可以选择ATRR(X)中的函数的形式。此功能，根据规范，“把X属性的值以字符串的形式返回”，如下：
a:after { content: attr(href); }
attr（）函数的功能：它得到特定属性的值并把它作为插入的文本成为一个伪元素。
显示结果：页面上的每一个<a>元素的href值立即被放置在每个各自的<a>元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。
可以用这个函数去获取元素的title属性，或者甚至是microdata的值。当然，并不是所有的例子都符合自己的实际，但根据不同的情况，一个特定的属性值作为一个伪元素可以是实际的。然而，获取title或者图像的alt的值并作为实际的伪元素显示在页面上是不可能的。
注意：
伪元素必须是被应用元素的子元素。<img>，是void(或 空元素)，没有子元素，所以它在此不可用，同样也适用于其他空元素，例如：<input>。
