How to use css pseudo-classes

How to use css pseudo-classes?

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

Pseudo class syntax:

selector:pseudo-class {property:value;}

CSS classes can also use pseudo classes:

selector.class:pseudo-class {property:value;}

anchor pseudo class

In browsers that support CSS, different states of the link can be displayed in different ways

Example

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

Note: In the CSS definition, a:hover must be set It is only valid after a:link and a:visited.

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 CSS classes:

a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>

If the link in the above example has been visited, It will appear in red.

CSS :first-child pseudo-class

You can use the :first-child pseudo-class to select the first child element of a parent element.

Note: In previous versions of IE8, 1a309583e26acea4f04ca31122d8c535 must be declared so that :first-child can take effect.

Match the first e388a4556c0f65e1904146cc1a846bee element

In the following example, the selector matches the e388a4556c0f65e1904146cc1a846bee element that is the first child of any element:

Example

p:first-child
{
    color:blue;
}

Match the first 5a8028ccc7a7e27417bff9f05adf5932 element in all e388a4556c0f65e1904146cc1a846bee elements

In the following example, select all

Instance

p > i:first-child
{
    color:blue;
}

Matches all 5a8028ccc7a7e27417bff9f05adf5932 elements within any e388a4556c0f65e1904146cc1a846bee element that is the first child element

In the following example, the selector matches all 5a8028ccc7a7e27417bff9f05adf5932 elements within all e388a4556c0f65e1904146cc1a846bee elements that are the first child of the element:

Example

p:first-child i
{
    color:blue;
}

CSS - :lang pseudo-class

:lang pseudo-class gives you the ability to define special rules for different languages

Note: IE8 must declare < ;!DOCTYPE> can support the ;lang pseudo-class.

In the following example, the :lang class defines the type of quotes for the q element with attribute value no:

Example

q:lang(no) {quotes: "~" "~";}

The above is the detailed content of How to use css pseudo-classes. For more information, please follow other related articles on the PHP Chinese website!