正文
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>Buy milk</li> <li>Take the dog for a walk</li> <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> <html lang="en"> <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 class="textarea" contenteditable="true"><br /></div> <div>提供::selection 伪元素选择器测试的文本</div> <p>也尝试选中在这个p标签中的文本</p> </body> </html> |
在页面中选择p和div标签的文本时，选中的文本将分别应用style中设置的样式。
placeholder
::placeholder可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。
input { line-height: 2em; } ::placeholder { color: red; font-size: 1.5em; } <input placeholder="nDos"> |
该伪元素兼容性很差，不推荐使用。
