grammar

Tag name: pseudo-class name {declaration; }Copy the code

The pseudo-class selects elements based on the current state of the element. Because states change dynamically, when an element reaches a particular state, it may get a pseudo-class style; When the state changes, it loses that style again.

Various attributes

The table below:

attribute describe
:active Add styles to the activated elements
:focus Adds styles to elements that have keyboard input focus
:hover Add styles to elements when the mouse hovers over them
:link Add styles to links that are not accessed
:visited Adds styles to links that have been accessed
:first-child Adds a style to the first child of the element
:lang Adds a style to the element with the specified lang attribute

,

The sample

The: Hover pseudo-class applies to elements that have a mouse pointer hovering over them.

a:hover 
{

color:#B46210;

text-decoration:underline;

}

Copy the code

Sample code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a { text-decoration: none; } a:hover { text-decoration: underline; color: red; } p:hover { font-size: 20px; font-weight: bold; } < / style > < / head > < body > < a href = "#" > cattle to coax the conan < / a > < p > Keafmd < / p > < / body > < / HTML >Copy the code

Effect screenshot:

From the above GIF we can obviously see the difference before and after the click, which is the function of hover pseudo-class

Use ↓ for other pseudo-classes

Example code 2:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> a{ text-decoration: none; } a:visited{ color:#C8C8C8; } a:hover{ color:#ec7814; } a:link{ color:#C8C8C8; } li:first-child{ color:green; } li:last-child{ color:red; } li:nth-child(3){ color:pink; } < / style > < / head > < body > < a href = "http://www.baidu.com" > baidu < / a > < ul > < li > structural pseudo class selectors 1 < / li > < li > structural pseudo class selectors 2 < / li > <li> Structural pseudoclass selectors 3</li> <li> Structural pseudoclass selectors 4</li> <li> </li> <li> Structural pseudoclass selectors 6</li> <li> </li> < ul> </body> </html>Copy the code

Effect screenshot:

The use of these pseudo-classes should become clearer from this sample

  1. In the CSS definition, a: Hover must be placed after a: Link and a:visited to be valid.
  2. In the CSS definition, a:active must be placed after a:hover to be valid.
  3. Pseudo class names are case insensitive.

Writing is not easy, read if it helps you, thank you for your support!

If you are a computer terminal, see the lower right corner of the “one button three links”, yes click it [ha ha]



Come on!

Work together!

Keafmd