Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.