css伪元素选择器_伪元素选择器

css伪元素选择器

Pseudo-element selectors are distinguished from pseudo-class selectors by the fact that the latter affect elements when they are in particular states (for example, a:hover controlling the appearance of links when the mouse is over them). Pseudo-element selectors control the appearance of portions of an element’s content, such as the first line or letter of a paragraph.

伪元素选择器与伪类选择器的区别在于， 伪类选择器在处于特定状态时会影响元素(例如，当鼠标a:hover在元素a:hover ， a:hover控制链接的外观)。 伪元素选择器控制元素内容各部分的外观，例如段落的第一行或字母。

With CSS3, the W3C instituted the convention that pseudo-element selectors should be preceded by two colons, to distinguish them from pseudo-class selectors, which get just one. In theory, modern browsers should recognize this rule, and they do… except for IE6 – 8. Also in theory, browsers should honour single colons in front of pseudo-element selectors that were present in CSS1 and 2, but I’ve found that certain browser versions do not. Personally, I’d go with the W3C recommendation.

在CSS3中，W3C制定了约定，即伪元素选择器应以两个冒号开头，以将它们与仅获得一个的伪类选择器区分开。 从理论上讲，现代的浏览器应该认识到该规则，但是它们确实……除了IE6 –8。从理论上讲，浏览器应该在CSS1和2中存在的伪元素选择器前面加一个冒号，但是我发现某些浏览器版本没有。 就个人而言，我会接受W3C的建议。

As before, I’ve linked to articles in the blog where appropriate.

和以前一样，我已在适当的地方链接到博客中的文章。

Pseudo-element selectors

Pseudo-element selector	Purpose
::first-line	Selects the first line of content in an element. Typically applied to paragraphs (for example p::first-line). Useful for first-line run-in effects.
::first-letter	Selects the first letter of an element. Typically applied to paragraphs or headings (for example, p::first-letter). Useful for creating initial and drop caps.
::before	Inserts content before a selection. Has all sorts of uses: generating opening quote marks for pull quotes, creating separators for navigation bar links, and much more.
::after	Just like ::before, with all the same uses, but generates content after a selection.
::selection	Changes the appearance of selected text.

伪元素选择器

伪元素选择器	目的
::first-line	选择元素中的第一行内容。 通常应用于段落(例如p::first-line )。 对于一线磨合效果有用。
::first-letter	选择元素的第一个字母。 通常应用于段落或标题(例如p::first-letter )。 用于创建初始和首字下沉 。
::before	在选择之前插入内容。 具有多种用途： 为拉引号生成开头引号 ， 为导航栏链接创建分隔符等等。
::after	就像::before ，具有相同的用途，但是在选择之后会生成内容。
::selection	更改所选文本的外观 。

更多资源 (Further Resources)

design shack has an excellent article on practical uses of ::before and ::after

设计棚屋上有一篇关于::before和::after实际用法的出色文章

翻译自: https://thenewcode.com/405/Pseudo-element-selectors

css伪元素选择器