"CSS3" details pseudo-elements and pseudo-classes

1. Pseudo-Class

The pseudo-class selection element is based on the state in which the current element is present, or the attributes that the element currently has, not the static flags of the element's ID, class, attributes, and so on. Because the state is dynamically changing, when an element reaches a certain state, it may get a pseudo-class style, and when the state changes, it loses the style. As you can see, its function is somewhat similar to class, but it is based on abstractions outside of the document, so it is called a pseudo class.

Pseudo-Class definition:

(1) The existence of pseudo-classes is meant to find information that does not exist with the DOM tree and is not available to regular CSS selectors through selectors.

(2) A pseudo-class is preceded by a colon : , followed by the name of the pseudo-class and an optional argument contained in parentheses.

(3) Any regular selector can use pseudo-classes in any location. Pseudo-class syntax is not case-sensitive. Some pseudo-classes are mutually exclusive, and some pseudo-classes can be used by the same element at the same time. Also, pseudo-classes can be dynamic in order to meet the DOM structure changes that the user produces when manipulating the DOM.

i:first-child {color:red} < P >    < I >First</i>    <i> Second</i></p>

Do not use pseudo-class, want to achieve the above effect, directly add Class:

 .first-child {color:red}  <  p  >  <  i  class  = "First-child"  >  first</ i     >  <  i  >  second</ i  >  </ p  >  

Instead of using pseudo-elements: First-letter, the first letter:

p:first-letter {color:red} < P > I am Stephen Lee. </ P >

If you want to achieve this, we can do this:

p:first-letter {color:red} < P >< span > I<span> am Stephen Lee. </ P >

I add a span tag to achieve this effect, sometimes I do not think of the difference, but also to do it yourself, now more clearly the difference between pseudo-class and pseudo-elements.

2. Pseudo-Elements

Unlike pseudo-classes for special state elements, pseudo-elements operate on specific content in an element, and the level of manipulation is deeper than pseudo-class, and therefore it is much less dynamic than pseudo-classes. In fact, the purpose of designing pseudo-elements is to select the first word (mother), the first line of the element content, and select the work that the ordinary selector cannot do before or after some content. The content that it controls is actually the same as the element, but it is simply an abstraction based on elements that does not exist in the document, so it is called a pseudo-element.

Pseudo-element definition:

(1) Pseudo-elements create abstract elements in the DOM tree that do not exist in the document language (which can be understood as HTML source code). For example: The Documen interface does not provide a mechanism to access the first word or the first line of the element's content, and pseudo-elements can enable the developer to extract the information. Also, some pseudo-elements can enable developers to obtain content that does not exist in the source document (for example ::before , Common ::after ).

(2) The pseudo-element is preceded by two colons :: and is then the name of the pseudo-element.

(3) Two colons are used :: to distinguish between pseudo-classes and pseudo-elements (there is no difference in CSS2). Of course, given compatibility, the existing pseudo-elements in CSS2 can still use a colon : syntax, but the new pseudo-elements in CSS3 must use two colons :: .

(4) A selector can only use one pseudo-element, and the pseudo-element must be at the end of the selector statement.

"CSS3" details pseudo-elements and pseudo-classes