What are the functions of the four css hyperlink pseudo-classes?-Front-end Q&A-php.cn

What are the functions of the four css hyperlink pseudo-classes?

青灯夜游

Release： 2021-11-09 10:56:09

Original

4120 people have browsed it

The functions of the four css hyperlink pseudo-classes: 1. ":link", which defines the style of normal links; 2. ":visited", which defines the style of visited links; 3. ":hover" , defines the style when the mouse hovers over the link; 4. "active", defines the style when the mouse clicks on the link.

What are the functions of the four css hyperlink pseudo-classes?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Because we need to define the link style, the anchor tag in the hyperlink - a is essential. The method of writing the link between the anchor tag and the pseudo class is the basic method of defining the link style. , they are written as follows:

a:link, define the style of normal link;
a :visited, defines the style of the visited link;
a:hover, defines the style when the mouse is hovering over the link;
a:active, defines the style when the mouse clicks on the link.

Among them: :link and :visited can only be applied to setting hyperlink a, while :hover and :active can be applied to all elements

:hover is used to indicate the status of the mouse moving in
:active is used to indicate the mouse click

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超链接的伪类</title>
    <link rel="stylesheet" href="../css/a.css">
</head>
<body>
     <a href="https://www.12345.com/" target="__blank">没访问过的链接</a>
     <br>
     <a href="https://www.csdn.net/" target="__blank">访问过的链接</a>
</body>
</html>

Copy after login

/* 没访问过的链接状态 */
a:link{
    font-size: 20px;
    color: hotpink;
}
/* 访问过的链接状态 */
a:visited{
    color: green;
}
/* 鼠标移入链接时的状态 */
a:hover{
    color: rgb(0, 217, 255);
}
/* 鼠标点击链接时的状态 */
a:active{
    color: rgb(255, 0, 0);
}

Copy after login

Note: As long as you have searched for it, it will be counted as visited, unless you clear the historical browsing cache data.

Pseudo elements

Pseudo elements are some special elements on the page that do not really exist. Pseudo elements represent some special positions. Pseudo elements use:: at the beginning

::first-letter represents the first letter
::first-line represents the first line
::selection represents Selected content
::before The beginning of the element
::after The last part of the element

Note:

1. Because of setting::before and: :after has no effect, so ::before and ::after must be used in conjunction with the content attribute. 2. The content added in content cannot be selected with the mouse.
3. The q tag in HTML represents a short quote, which has the effect of adding double quotes. The principle is that the ::before and ::after attributes are used, and double quotes are added to the content, so the double quotes of the q tag cannot be selected. .

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <link rel="stylesheet" href="../css/pseudo_element.css">
</head>
<body>
    <h3>WHERE THERE IS A WILL, THERE IS A WAY</h3>
     <p>The secret of success (The key to success) is not so much money as a strong will. A great man is one who has a strong will and an indomitable spirit. In other words, if a man does not have a strong will to win (get) the final victory, he will never succeed in his life. He is no more than a failure.It is quite obvious that there is no difficult thing (nothing difficult) in the world. if you make up your mind to do it, you will certainly accomplish your end. That stands to reason.</p>
</body>
</html>

Copy after login

/* 第一个字母设置像素为50px */
::first-letter{
    font-size: 50px;
}
/* 第一行设置绿色 */
::first-line{
    color: green;
}
/* 鼠标选中的字体背景设置为橙色 */
::selection{
    background-color: sandybrown;
}
/* 元素p内容开始之前添加符号 ☛，结尾添加符号☚，注意该符号鼠标无法被选中*/
p::before{
    content: "☛";
}
p::after{
    content: "☚";
}

Copy after login

(Learning video sharing: css video tutorial)

The above is the detailed content of What are the functions of the four css hyperlink pseudo-classes?. For more information, please follow other related articles on the PHP Chinese website!