What is css pseudo class

css pseudo-class is used to define special states of elements. It can be used to: 1. Set the style when the mouse is hovering over the element; 2. Set different styles for visited and unvisited links; 3. Set the style when the element gets focus.

#The operating environment of this article: Windows 7 system, css3 version, Dell G3 computer.

What are pseudo-classes?

Pseudo classes are used to define special states of elements.

For example, it can be used to:

• Set the style when the mouse is hovering over the element

• is visited Set different styles from unvisited links

• Set the style when the element gets focus

Syntax

Syntax of pseudo-class:

selector:pseudo-class {
  property: value;
}

Anchor pseudo-class

Links can be displayed in different ways:

Instance

/* 未访问的链接 */
a:link {
  color: #FF0000;
}
/* 已访问的链接 */
a:visited {
  color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}
/* 已选择的链接 */
a:active {
  color: #0000FF;
}

Note: a:hover must be after a:link and a:visited in the CSS definition to take effect! a:active must be after a:hover in the CSS definition to take effect! Pseudo class names are not case sensitive.

Pseudo classes and CSS classes

Pseudo classes can be used in conjunction with CSS classes:

When you hover over the link in the example When, it will change color:

Example

a.highlight:hover {
  color: #ff0000;
}

Recommended learning: "css video tutorial"

The above is the detailed content of What is css pseudo class. For more information, please follow other related articles on the PHP Chinese website!