How to use pseudo-classes and pseudo-elements in css-CSS Tutorial-php.cn

How to use pseudo-classes and pseudo-elements in css

清浅

Release： 2018-11-24 10:22:44

Original

2837 people have browsed it

Pseudo-classes can add special effects to the selector through methods such as link and hover. Pseudo-elements can add the first line style through: first-line, and add the initial letter through: first-letter. The details will be introduced below. These two aspects

Pseudo class

It is a way to select certain parts of the html document, indicating that over time The dynamic state of elements when entering or exiting through user intervention does not, in principle, belong to the html document tree itself and its elements or attributes. In fact, CSS pseudo-classes are used to add some special effects of selectors, and pseudo- Different elements, pseudo-classes can appear anywhere in the selector chain.

Example

a: link represents an unvisited link

<style>
a:link{
background-color: pink;
}

Copy after login

Image 1.jpg

## a: visit represents the visited link

a:visited{
background-color: pink;
}

Copy after login

Image 7.jpg

a: hover when the mouse moves to When linking

a:hover{
background-color: pink;
}

Copy after login

Image 1.jpg

a:hover must be located after a:link and a:visited for it to take effect!

a: active: indicates the selected link

a:hover{
background-color: pink;
}
		a:active{
background-color: pink;
}

Copy after login

Image 6.jpg

Note that active must be used after hover to take effect

Pseudo-elements

Pseudo-elements are used to set special effects to certain selectors and can only be applied to external and document-level contexts. instead of inline styles. They may only appear at the end of a selector chain, and each selector can specify only one pseudo-element. To handle multiple pseudo-elements on a single element structure, you must create multiple style selectors or declaration statements.

: first-line pseudo-element

is used to set a special style to the first line of text, and can only be used for block-level elements

can be modified The following attributes font, color, background, word-spacing, letter-spacing, etc.

p:first-line 
{
color: pink;
font-variant: small-caps;/*改为大写*/

}
</style>
</head>
<body>
<p>
you are very good!
</p>

Copy after login

are applicable to the first line

Image 8.jpg

: first-letter pseudo-element

is used to set a special style to the first letter of the text:

can modify the font, color, background, margin, padding, border and other attributes

p:first-letter 
{
color: pink;
font-variant: small-caps;/*改为大写*/

}
</style>
</head>
<body>
<p>
you are very good!

Copy after login

Applies only to the first letter

Image 9.jpg

Summary: The above is the entire content of this article, I hope it will be useful to Everyone’s learning helps.

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