Pseudo-class selectors and pseudo-elements in CSS

1. Pseudo-Class selectors

In CSS, the most commonly used pseudo-class selectors are several selectors that are used on a (anchor) element, and they are used in the following ways:

A:link{color: #FF0000; Text-decoration:none}

A:visited{color: #FF0000; Text-decoration:none}

A:hover{color: #FF0000; Text-decoration:none}

A:active{color: #FF0000; Text-decoration:none}

2. Pseudo element Selector

The pseudo-element selector is not a selector for a real element, but a selector for a pseudo-element that has already been defined in the CSS, with the following four pseudo-element selectors in the CSS:

(1) first-line pseudo-element Selector

<style type=text/css>

P:first-line{color: #0000FF};

</style>

(2) First-letter pseudo-element Selector

Use styles for the first letter of text in an element (European and American text) or the first word (Chinese and Japanese characters).

<style type=text/css>

P:first-letter{color: #0000FF};

</style>

(3) before pseudo-element selector

The before pseudo-element selector has some content inserted before an element, using the following method:

Element: before{

Content: ""

}

<style type= "Text/css" >

Li:before{content: "Hello"}

</style>

(4) after pseudo element selector

<style type= "Text/css" >

li:after{

Content: "Hello";

font-size:12px;

color:red;

}

</style>

Pseudo-class selectors and pseudo-elements in CSS