乐趣区

关于前端:伪类和伪元素的区别是什么呢

伪类和伪元素的区别是什么?

是什么?

伪类(pseudo-class)是一个以冒号 (:) 作为前缀,被增加到一个选择器开端的关键字,当你心愿款式在特定状态下才被出现到指定的元素时,你能够往元素的选择器前面加上对应的伪类。

伪元素用于创立一些不在文档树中的元素,并为其增加款式。比如说,咱们能够通过 ::before 来在一个元素前减少一些文本,并为这些文本增加款式。尽管用户能够看到这些文本,然而这些文本实际上不在文档树中。

区别

其实上文曾经表白分明两者区别了,伪类是通过在元素选择器上退出伪类扭转元素状态,而伪元素通过对元素的操作进行对元素的扭转。

咱们通过 p::before 对这段文本增加了额定的元素,通过 p:first-child扭转了文本的款式。

p::before {content: 'coder:'}

p:first-child {color: red;}

what’s the difference between pseudo-classes and pseudo-elements ?

what is it?

A pseudo-class is a keyword prefixed with a colon (:) and added to the end of a selector.

When you want the style to be presented to the specified element in a specific state, you can go to the element Add the corresponding pseudo-class after the selector.

Pseudo-elements are used to create some elements that are not in the document tree and add styles to them.

For example, we can add some text before an element through ::before, and add styles to these texts. Although the user can see the text, the text is not actually in the document tree.

the difference

In fact, the above has clearly expressed the difference between them.

Pseudo-classes change the state of the element by adding a pseudo-class to the element selector, while the pseudo-elements change the element by operating on the element.

We add additional elements by p::before on this text, and use p:first-child changing the style of the text.

p::before {content: 'coder:'}

p:first-child {color: red;}
退出移动版