CSS pseudo elements

 

Pseudo class

 : First-childPseudo class. The pseudo class adds a style to the first child element of the element.

For example, we want to make a special definition for the first element in the list.

Li: First-child {color: Red}

<Ul>

<Li>This isUlOne inLI </LI>

<Li>This isUlTwo inLI </LI>

<Li>This isUlThe threeLI </LI>

</Ul>

Link pseudo-class:

: LinkAnd: Visited

For example:

A: link {color: #33ff00 ;}

A: visited {color: # ff0000 ;}

<A href = "http://www.baidu.com">Baidu</A>

Dynamic pseudo class:

: Hover,: Active,: Focus.

: HoverIndicates the move of the mouse.

: Active, Click the status of the press.

: FocusIndicates the state of the focal point.

: ActiveAnd: Focus.

For example:

<Label for = "username">User Name: </Label> <input type = "text" id = "username"/>

<Label for = "password">Password: </Label> <input type = "password" id = "password"/>

CSS:

Input # Username: Active {Background: #000099}

Input # password: Focus {Background: #00ff00}

It is not hard to find: Click the first text box, and click the background color of the text box. When you release the mouse, the background color is gone.

Click the second text box. Unless we click somewhere else on the webpage, it will still giveCSSDefined

Pseudo object

: First-letter

Used to set the style table attribute of the first character in an object. The most common application is to workFloatThe first letter sink.

P: First-letter {float: Left; font-size: 2.5em; color: Red}

Note: First-letterThe pseudo object only acts on block elements.Display: BlockOnly block elements can be converted.

: First-line

AndFirst-letterSimilar.