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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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里包含一个背景图像一样做你能做的

p:before {

  content: url(image.jpg);

}

　　注意：不能使用引号。如果将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。

　　[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>。

　　2、可怕的浏览器兼容性

　　任何前端技术的发展势头，第一个问题就是浏览器的支持。在这种情况之下，它不是个很大的问题。

　　浏览器支持:before 和 :after 伪元素栈，像这样：

Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
几乎所有的移动浏览器。

　　唯一真正的问题是没有获得支持的IE6和IE7。

　　3、伪元素不是决定性的

　　大多数情况下，伪元素一般修饰（或者帮助）内容，不会给不支持的浏览器造成问题。所以，如果使用者具有较高的IE版本，仍然可以在某种程度上使用它们。

　　4、提醒注意

　　伪元素不会出现在DOM中。这些元素不是真正的元素。因此，它们不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。

　　另外，开发工具，例如火狐，不要用伪元素显示内容。所以，如果使用了，伪元素会造成难以维护和调试缓慢。可以使用谷歌的开发工具来查看一个伪元素相关联的风格，但不会出现在DOM元素里。同时，火狐在1.8版加入伪元素支持它。