Pseudo-elements and pseudo-classes

Pseudo-elements and pseudo-classes Why write this article?

Pseudo-elements and pseudo-classes are always easy to confuse, without a lot of practice and intentions to realize is not easy to remember. I believe for most of the novice is this, I myself often remember, like this is not difficult problem, has been looking at other people's blog, no point of their own ideas, as if it is very low one thing, so write this article.

What is a pseudo-class?

The essence of pseudo-class is to associate some kind of phantom class with the elements related to pseudo-class, for example:

< Div >      < P > These is the necessary steps:</p></div>

Using the rule p:first-child {font-weight:bold;}, the first child element p font of the div is thicker.

If we do not use pseudo-class, we also want to achieve the above effect, then we add the class name First-child to P element, as follows:

< Div >    <  class= "First-child"> These is the necessary steps:</p  ></div>

Use rules. First-child {font-weight:bold;} can achieve the same effect.

This is why it is called a pseudo-class, and the "class" font now seems to exist in a rule that is associated with a fancy class name, and we can directly use pseudo-classes to add styles without first thinking about the class name and then adding the style.

The types of pseudo-classes are:

Link pseudo-Class:: Link,: Visited

Dynamic Pseudo-Class:: Focus,: hover,: Active

For the first child element:: First-child

Select by language:: lang

What is a pseudo-element?

Pseudo-elements can insert imaginary elements into a document, resulting in some kind of effect. Then use the previous example:

< Div >    < P > </ P > </ Div >

Use rule p:first-letter {font-size:200%;} The first letter of the P element is twice times the size of the remaining letters.

Instead of using pseudo-elements, to achieve the same effect, you need to wrap the first letter of the P element with a new tag, and then add the class name and then add the style.

< Div >    < P >         <  class= "First-letter">T<i>          hese is  necessary steps:    </p></ Div >

Use rules. First-letter {font-size:200%;} can also achieve the same effect.

This is why it is called pseudo-element, "element" is reflected in we can not add additional tags (tag also called element), you can directly to the letter you want to add style, as if using the element selector.

Common Pseudo-elements:

4 pseudo-elements are defined in CSS2.1: Set the initial style (: First-letter), set the first line style (: First-line), set the style before (: before) and after the element (: after)

Similarities and differences between the two

Same place: ① both are related to selectors, some of which are called pseudo-class selectors and pseudo-element selectors. ②, referring to the CSS3 authoritative guide, says this: applying styles to parts of a document based on a different condition rather than a document structure, and not being able to accurately infer how styles are applied using the markup of the study document.

Different places: pseudo-classes develop styles for the Phantom class indicated by the state of some elements (even the document itself). (emphasizing elements, embodying pseudo "classes").

Pseudo-elements can create styles for structures that do not necessarily exist in the document. (emphasis does not necessarily exist, embodying pseudo "elements").

Pseudo-elements and pseudo-classes