css 选择器 伪元素

选择器之前 (Before Selector)

The CSS ::before selector can be used to insert content before the content of the selected element or elements. It is used by attaching ::before to the element it is to be used on.

CSS ::before选择器可用于在选定元素或多个元素的内容之前插入内容。 通过将::before附加到要使用的元素上来使用它。

Let’s look at some examples:

让我们看一些例子：

p::before {   content: "* ";}span.comment::before {  content: "Comment: ";  color: blue;}

 To infinity, and beyond!
 I am Buzz Lightyear. I come in peace.
May the force be with you.
 Do. Or do not. There is no try.

In the example above we are prepending an asterisk and a space before every paragraph element on the page. Also, we're prepending "Comment: " in blue before every span element with the class comment.

在上面的示例中，我们在页面上每个段落元素之前加一个星号和一个空格。 另外，我们在每个span元素之前，在带有class comment蓝色前添加“ Comment：”。

选择器之后 (After Selector)

The CSS ::after selector can be used to insert content after the content of the selected element or elements. It's used by attaching ::after to the element it is to be used on.

CSS ::after选择器可用于在一个或多个选定元素的内容之后插入内容。 通过将::after附加到要使用的元素上来使用。

Here are some examples:

这里有些例子：

.buzz::after {   content: " - Buzz Lightyear";  color: blue;}.yoda::after {   content: " - Yoda";  color: green;}

 To infinity, and beyond!
 Do. Or do not. There is no try.

In the example above, we're appending " - Buzz Lightyear" in blue to the element with the class buzz. Also, we're appending " - Yoda" in green to the element with the class yoda.

在上面的示例中，我们将蓝色的“-Buzz Lightyear”附加到具有buzz类的元素上。 另外，我们在类yoda的元素后面添加绿色的“ yoda 。

单冒号与双冒号 (Single-colon vs. Double-colon)

There’s a bit of discussion about the right way of using pseudo-elements – the old style single-colon (:before), used in CSS specifications 1 and 2, versus the CSS3 recommendation, double-colon (::before), mainly to “establish a discrimination between pseudo-classes and pseudo-elements”.

关于使用伪元素的正确方法，有一些讨论– CSS规范1和2中使用的旧样式单冒号( :before )与CSS3建议双冒号( ::before )，主要是为了“在伪类和伪元素之间建立区分” 。

But for compatibility reasons, the single-colon method is still accepted. Keep in mind that IE8 supports the single-colon notation only.

但是出于兼容性原因，单冒号方法仍然被接受。 请记住，IE8仅支持单冒号表示法。

更多信息： (More Information:)

翻译自:

css 选择器 伪元素