伪类和伪元素的区别是什么?
是什么?
伪类(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;}