"CSS" pseudo-class and pseudo-element selectors

Pseudo class

Sets the special effect of the element itself, based on the state or attributes that the current element is in.

1. A:link any links that are not clicked;
2. a:visited matches more links that have been clicked;
3. A:active matches all the non-loosened elements of the mouse press;
4. A:hover matches all elements that the mouse moves in/hover over the element;
5. : The selected element of focus;
6. : The first child element of a first-child element;
7. : lang allows the creator to define the language used in the specified element;

Pseudo-Class provisions:

Due to the priority of CSS, the following four pseudo-classes need to be written in order, otherwise there will be a problem

L (link) V (visited) H (hover) A (active)Love and Hate (Loves and Hates)

The expansion of pseudo-class hover:

1. e:hover{} has an impact on itself;
2. E:hover f{} has an effect on child element F (when F needs to be hidden)
3. E:hover + f{} has an impact on sibling elements;

It is important to note that the pseudo-class of the E element sets the effect object's relationship to the E element (itself, child element, sibling element) and then uses the corresponding selector settings.

Pseudo element

Element-based abstraction, which differs from a pseudo-class, is that it relies on elements that itself can be used as an abstract element , in-line elements, using two colons for pseudo-elements, but only one colon for compatible ie.

1. :: Before element before
2. :: After Element
3. :: First-letter The first letter of the text
4. :: First-line The first line of text

Pseudo element Clear float: Clearfix class

. Clearfix {      content: ';       Display: block;       Clear:both;      }     . clearfix{zoom: 1;} /* compatible with IE */

Pseudo-Elements set small triangles:

For example, the small triangle that precedes the message prompt is set as a pseudo-element, with the following code:

. Tips{/* message box */position:relative;width:180px;padding:10px;Background-color:#56A9D3;Border-radius:4px; }. Tips:before{
/* Set location relative to message box */
position:Absolute;Top:30%; Left:-20px;content: "";width:0px;Height:0px;Border:10px Solid Transparent*/* Use border color to set the triangle display, three sides transparent */Border-right-color:#56A9D3; }

It is important to note that the pseudo-element needs to be set to content before it is displayed, content: "; After the setting is really inserted, even if it is empty.

"CSS" pseudo-class and pseudo-element selectors