|
selection |
[CSS4]应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。（IE8及以下不支持）（火狐-moz-selection） |
|
first-line |
选择每个 <p> 元素的首行，并为其设置样式。 |
|
first-letter |
选择每个 <p> 元素的首字母，并为其设置样式。 |
|
before |
在每个 <p> 元素的内容之前插入新内容。 |
|
after |
在每个 <p> 元素的内容之后插入新内容。 |
|
cue |
|
|
backdrop |
|
|
placeholder |
|
|
marker |
|
|
spelling-error |
|
|
grammar-error |
|
与伪类一样， 伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式。有时你会发现伪元素使用了两个冒号 (::) 而不是一个冒号 (:). 这是CSS3的一部分，并尝试区分伪类和伪元素. 大多数浏览器都支持这两个值。
若页面只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。
所有伪元素能实现的，真实子元素都可以做到。只不过有时候单纯是为了样式和布局就改变html结构，这样的做法不干净，不值得提倡，所以才有了伪元素的市场。我用伪元素绘制过打印机，拆开一半的信封等，也用它实现过非规整图片轮廓。不过这些真实子元素同样可以做到，只不过没有做到内容结构与样式分离而已。
注意：没法通过DOM操作直接操作伪元素。
1.1 各伪元素功能
selection伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
只有一小部分CSS属性可以用于::selection 选择器： color, background-color, cursor, outline, text-decoration, text-emphasis-color和text-shadow。要特别注意的是，background-image 会如同其他属性一样被忽略。
注意：::selection中的text-shadow属性仅有Chrome, Safari 和 Firefox 17+支持。
如下列所示：
|
<!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中设置的样式。
