CSS选择器之伪类选择器（伪元素）

selection	[CSS4]应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。（IE8及以下不支持）（火狐-moz-selection）
first-line	选择每个 <p> 元素的首行，并为其设置样式。
first-letter	选择每个 <p> 元素的首字母，并为其设置样式。
before	在每个 <p> 元素的内容之前插入新内容。（IE7及以下不支持）
after	在每个 <p> 元素的内容之后插入新内容。（IE7及以下不支持）
cue	匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。
backdrop	参见MDN相关介绍（nDos翻译）（兼容性很差不推荐使用）
placeholder	（兼容性很差不推荐使用）
marker	::marker伪元素选择列表的前置标记，一般包含着重符号或数字。任何设置 display: list-item属性的元素或伪元素都能使用::marker 比如 <li> 和<summary> 元素。（兼容性很差不推荐使用）
spelling-error	表示浏览器标记为不正确拼写的文本段。（目前没有浏览器实现）
grammar-error	应用于浏览器标识为语法错误的文本段。（目前没有浏览器实现）

与伪类一样，伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式。有时你会发现伪元素使用了两个冒号 (::) 而不是一个冒号 (:). 这是CSS3的一部分，并尝试区分伪类和伪元素. 大多数浏览器都支持这两个值。

若页面只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。

所有伪元素能实现的，真实子元素都可以做到。只不过有时候单纯是为了样式和布局就改变html结构，这样的做法不干净，不值得提倡，所以才有了伪元素的市场。我用伪元素绘制过打印机，拆开一半的信封等，也用它实现过非规整图片轮廓。不过这些真实子元素同样可以做到，只不过没有做到内容结构与样式分离而已。

注意：没法通过DOM操作直接操作伪元素。

1.1 各伪元素功能

first-line

::first-line CSS pseudo-element （CSS伪元素）在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

和其他所有的伪元素一样，::first-line 不能匹配任何真实存在的html元素。

::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中，::first-line 是不起作用的。

只有部分CSS属性可以用于::first-line选择器：字体设置,背景设置,color,word-spacing, letter-spacing, text-decoration, text-transform, and line-height, text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align。

该伪元素不再举例说明。

first-lette

::first-letter会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。

元素首字符并不总是很容易识别：

1、首字符之前或紧跟首字符的标点符号在伪元素匹配范围内。标点符号（Punctuation）包括在开（Ps），闭（Pe），初始引用（Pi），结束引用（Pf）当中定义的任何Unicode字符以及其他种类的标点符号（Po）。

2、另外还会有一些以大写双字母组合命名的语言，比如荷兰的 IJ。在这种罕见情况下，两个大写字母都理应被::first-letter 伪元素匹配到。（但是浏览器对此支持得很糟糕，可以用浏览器兼容性进行核实）。

3、::before伪元素和content属性结合起来有可能会在元素前面注入一些文本。如此::first-letter 将会匹配到content文本的首字母。

首行只在block-container box内部才有意义，因此::first-letter伪元素只在display属性值为block，inline-block，table-cell，list-item或者table-caption的元素上才起作用。其他情况下，::first-letter则不起作用。

只有部分CSS可以在包含使用了::first-letter 伪元素选择器的CSS规则集声明块内运用:

所有的字体、背景、外边距、内边距和边框属性,color,text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (使用恰当的话), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align 注意此刻必须没有浮动) 等属性。

该伪元素不再举例说明。

before/after

::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。::after类似。

注意: 由::before 和::after 生成的伪元素包含在元素格式框内，因此能应用在可替换元素上，比如<img>或<br> 元素。使用::before 和::after生成的伪元素的content不能够被选择。

参见下面这个示例：

HTML部分

<ul>

<li>Exercise</li>

<li>Write code</li>

<li>Play music</li>

<li>Relax</li>

</ul>

CSS部分

li {

list-style-type: none;

position: relative;

margin: 2px;

padding: 0.5em 0.5em 0.5em 2em;

background: lightgrey;

font-family: sans-serif;

}

li.done {

background: #CCFF99;

}

li.done::before {

content: '';

position: absolute;

border-color: #009933;

border-style: solid;

border-width: 0 0.3em 0.25em 0;

height: 1em;

top: 1.3em;

left: 0.6em;

margin-top: -1em;

transform: rotate(45deg);

width: 0.5em;

}

javascript部分

var list = document.querySelector('ul');

list.addEventListener('click', function(ev) {

if( ev.target.tagName === 'LI') {

ev.target.classList.toggle('done');

}

}, false);

下面展示的是最终得到的结果。请注意我们没有使用任何图标，对勾标识实际上是使用 CSS 定义了样式的 ::before 伪元素。接下来建立几个待办事项来完成它们吧。

selection

selection伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

只有一小部分CSS属性可以用于::selection 选择器： color, background-color, cursor, outline, text-decoration, text-emphasis-color和text-shadow。要特别注意的是，background-image 会如同其他属性一样被忽略。

注意：::selection中的text-shadow属性仅有Chrome, Safari 和 Firefox 17+支持。::selection CSS伪元素选择器是CSS第3级选择器的草案，但是在被推荐使用前就被废弃。它现在在第4级伪元素选择器草案中。

如下列所示：

<!DOCTYPE html>

<head>

<style>

::-moz-selection {

color: gold;

background: red;

}

::selection {

color: gold;

background: red;

}

p::-moz-selection {

color: white;

background: black;

}

p::selection {

color: white;

background: black;

}

</style>

</head>

<body>

<div>提供::selection 伪元素选择器测试的文本</div>

<p>也尝试选中在这个p标签中的文本</p>

</body>

</html>

在页面中选择p和div标签的文本时，选中的文本将分别应用style中设置的样式。

placeholder

::placeholder可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。

input { line-height: 2em; }

::placeholder {

color: red;

font-size: 1.5em;

}

该伪元素兼容性很差，不推荐使用。

秒客网