What is the use of the pseudo-class of css
This article is about the usefulness of css's pseudo-classes. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
The CSS pseudo-class is used to add some special effects of selectors.
The syntax of the pseudo class:
Selector:pseudo-class {property:value;}
The CSS class can also use pseudo-classes:
Selector.class:pseudo-class {property:value;}
Anchor pseudo class
In browsers that support CSS, different states of links can be displayed in different ways
Case study
A:link {color:#FF0000;} / * unvisited links * /
A:visited {color:#00FF00;} / * visited links * /
A:hover {color:#FF00FF;} / * Mouse over the link * /
A:active {color:#0000FF;} / * selected links * /
Note: in the CSS definition, a:hover must be placed after a:link and a:visited to be valid.
Note: in the CSS definition, a:active must be placed after a:hover to be valid.
Note: pseudo-class names are not case-sensitive.
Pseudo classes and CSS classes
Pseudo classes can be used with the CSS class:
A.red:visited {color:#FF0000;}
CSS syntax
If the link in the above example has been accessed, it will be displayed in red.
CSS:first-child pseudo class
You can use the: first-child pseudo class to select the first child of the parent element.
Note: previous versions of IE8 must be declared so that first-child can take effect.
Match the first one.
element
In the following example, the selector matches the
Elements:
Case study
P:first-child
{
Color:blue
}
Match all
The first element in the element
In the following example, select all that match
The first element of the element:
Case study
P > i:first-child
{
Color:blue
}
Matches all objects that are the first child element
All elements in an element
In the following example, the selector matches all objects that are the first child of the element
All elements in the element:
Case study
P:first-childi
{
Color:blue
}
CSS-:lang pseudo class
Lang pseudo-classes give you the ability to define special rules for different languages
Note: IE8 must be declared to support; lang pseudo-class.
In the following example, the: Lang class defines the type of quotation marks for the Q element whose attribute value is no:
Case study
Q:lang (no) {quotes: "~" ~ ";}
Thank you for reading! This is the end of this article on "what is the use of pseudo-classes of css?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
