CSS pseudo-class and pseudo-element properties

The basic selector and the attribute selector in CSS and the pseudo-class selector are summarized, but the pseudo-class is the corresponding pseudo-element.

So,,, what are the secrets of what they can't say? Next

Classify the two first

Types of pseudo-classes:

Types of pseudo-elements:

How to use both:

css3to differentiate between the two, the pseudo-class is explicitly represented by a colon, while the pseudo-element is represented by two colons.

:Pseudo-classes  伪类

::Pseudo-elements 伪元素


But because of compatibility issues, most of them are now unified with a single colon, but aside from compatibility issues, we should try to develop a good habit of writing, to distinguish between the two.

The difference:

——CSSPseudo-classes are used to add special effects to certain selectors.

-- CSS pseudo elements are used to add special effects to certain selectors.

But, to see such a soft words, middle I say it is very difficult to love Ah, so

See the demo below

This :first-child is compared by pseudo-class and pseudo :first-letter -elements.

p{        width:100px;height:100px;        Background:aqua;    }      Div>p:first-

<div>  <p >first</p>   <p>second</p></div>

很明显":first-child"Add a style to the first child element
If we do not use pseudo-classes and want to achieve the above effects, we can do this:

. one{        background:red;     

<p class= "One" >first</p>   <p>second</p>

This means that we add a class to the first child element and then define the style of the class. can achieve the same effect.

So let's look at the pseudo-elements:

p:first-letter{color:red}<p>now is 0 points</p>

A pseudo :first-letter -element adds a style to the first letter.
So if we do not use pseudo-elements, to achieve the above effect, what should be done?

As follows:

span{    color:red;   } <p><span>n</span>ow is 0 points</p>

That is, we add one to the first letter and span then give the span added style.
The difference between the two has come out. That is:

The effect of a pseudo-class can be achieved by adding an actual class , while the effect of the pseudo-element needs to be achieved by adding an actual element tag , which is why they are called pseudo-classes, a pseudo-element.

CSS pseudo-class and pseudo-element properties