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, must be declared so that :first-child can take effect.

Match the first

element

In the following example, the selector matches the

element that is the first child of any element:

Example

p:first-child
{
    color:blue;
}

Match the first element in all

elements

In the following example, select all element of the element:

Instance

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

Matches all elements within any

element that is the first child element

In the following example, the selector matches all elements within all

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!