Home > Article > Web Front-end > How to use pseudo-classes and pseudo-elements in css
How to use pseudo-classes and pseudo-elements in css
- 清浅Original
- 2018-11-21 10:31:292866browse
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;
}
## a: visit represents the visited link
a:visited{
background-color: pink;
}
a: hover when the mouse moves to When linking
a:hover{
background-color: pink;
}
a: active: indicates the selected link
a:hover{
background-color: pink;
}
a:active{
background-color: pink;
}
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>
: 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 attributesp:first-letter
{
color: pink;
font-variant: small-caps;/*改为大写*/
}
</style>
</head>
<body>
<p>
you are very good! Applies only to the first letter
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!