css-pseudo-class anchor pseudo-class

CSS pseudo-classes are used to add special effects to certain selectors.

Attributes	describe
:active	Add styles to the activated element.
:focus	Adds a style to the element that has keyboard input focus.
:hover	Adds a style to an element when the mouse is hovering over it.
:link	Add styles to unvisited links.
:visited	Add styles to visited links.
:first-child	Adds a style to the first child element of the element.

anchor pseudo-class

a:link {
    
    color: #FF0000}		/* 未访问的链接 */
a:visited {
    
    color: #00FF00}	/* 已访问的链接 */
a:hover {
    
    color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {
    
    color: #0000FF}	/* 选定的链接 */

:first-child pseudo-class

p:first-child {
    
    font-weight: bold;}

selector priority

In actual development, multiple styles are often set for the same label. Using different selectors will result in different final effects due to their different priorities.

The priority of the selector, as follows:

• Inline styles have priority 1000
• The ID selector has a priority of 100
• Class selector has priority 10
• Element selector has priority 1
• Wildcard selectors have priority 0
• Inherited styles do not have any precedence

It is worth noting:

• When a style contains multiple selectors, the priorities of all selectors need to be added up.
• Selectors with high priority are displayed first, and the calculation of the selector will not exceed its maximum order of magnitude.
• If two selectors have the same priority, whichever selector was defined last is valid.
• If a selector is used !important, the changed selector has the highest priority.