Pseudo-classes and pseudo-elements in CSS

Pseudo class

Pseudo-classes are similar to classes but do not have class-attached tags. Pseudo-classes are divided into UI pseudo-classes and structured pseudo-classes.

UI pseudo-Class

• : Link (adds a style to a link that has not been accessed)

• : visted(the style has been added to the access link)

• : Hover(adds a style to a mouse-hovering element)

• : Active(adds a style to the element being activated)

• : Focus(adds a style to the selected element)

Structured pseudo-Class

• : First-child(adds a style to the first child element)

• : Last-child(adds a style to the last child element)

Pseudo element

A pseudo-element is an element in a document that has no real elements.

Mainly have the following several

• : First-letter(adds a style to the first letter)

• : First-line(add style to first row)

• : Before(inserts something in front of some elements)

• : After(some content is inserted after some elements)

See: After, everyone in the brain should be able to emerge from the clear floating CSS. Yes, that's it.

?

1 2 3 4 5 6 7

.clearfix:after {      content : "." ;      display : block ;      height : 0 ;      visibility : hidden ;      clear : both ; }

Difference

Carefully pondering their definition.

The implementation of a pseudo-class is like adding a virtual class to the tag.

Give me a chestnut:

?

1 2 3) 4 5

a:hover{      font-size : 20px ;      color : red } <a href= "#" >Hello,World</a>

If you don't use pseudo-classes to achieve the same effect, you need to do this.

?

1 2 3) 4 5

.hover{      font-size : 20px ;      color : red } <a href= "#"  class= "hover" >Hello,World</a>

Such a contrast, "pseudo-class" as the name implies AH.

and pseudo-elements are like adding a new label Sign .

?

1 2 3) 4 5

p:first-letter{      font-size : 20px ;      color : red } <p>Hello,World</p>

If you don't use pseudo-elements to achieve the same effect, you need to do this.

?

1 2 3) 4 5

.first-letter{      font-size : 20px ;      color : red } <p><span class= "first-letter" >H</span>ello,World</p>

So summarize the method of distinction: The reality of the same effect is to add a class or an element tag .

Tips

1.CSS3 to distinguish between pseudo-classes and pseudo-elements, explicitly use a single colon to represent pseudo-classes, and double colons to represent pseudo-elements. However, for compatibility reasons, the current basic is to use a single colon to represent.

2. Search engines do not search for pseudo-element information. Therefore, do not add important content that you want the search engine to index by pseudo-elements

Resources:

"CSS Design Guide"

Detailed CSS Properties-the difference between pseudo-classes and pseudo-elements

Http://www.jb51.net/css/67317.html

Pseudo-classes and pseudo-elements in CSS