What is css pseudo class

藏色散人
Release: 2023-01-06 11:13:10
Original
4069 people have browsed it

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.

What is css pseudo class

#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;
}
Copy after login

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;
}
Copy after login

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;
}
Copy after login

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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template