Article directory
1. Link pseudo-class selector
1. Grammar description
Link pseudo-class selector canset link textStyles for different states:
- Unvisited link style: Default style, this style is displayed by default after the interface is opened;
a:link
- Visited link style: Clicked link, the link becomes this style;
a:visited
- Move the mouse to the link style: Move the mouse to the top of the link, the link will change to this style;
a:hover
- Selected link style: When the mouse is pressed and released, it will change to this style;
a:active
Link pseudo-class selector syntax:
a:link {
属性名称:属性值;
}
a:visited {
属性名称:属性值;
}
a:hover {
属性名称:属性值;
}
a:active {
属性名称:属性值;
}
2. Commonly used methods
Notice :
- The order must strictly comply with the LVHA order: When using the link pseudo-class selector, The four selectors must be in the above order, An error will occur if the order is reversed;
- Actual usage: In actual development, generally only need to set the style of
a:hoverwhen the mouse passes over,< /span> The other three do not need to be set and are not commonly used;
Common method: If you want to specify the style for a link under the .nav class, You need to use the descendant selector + link pseudo-class selector to specify;
- a:link link pseudo-class selector is not commonly used, Set a label style to have the same effect as a:link style;
/* a 标签选择器 同时设置的样式等同于 a:link 链接伪类选择器 */
.nav a {
color: gray;
}
/* :hover 链接伪类选择器 鼠标经过变成红色 */
.nav a:hover {
color: red;
}
CSS basic selectors:
- tag selector
- class selector
- ID selector
- wildcard selector
3. Code examples
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>链接伪类选择器</title>
<base target="_blank"/>
<style>
/*未访问链接:默认的样式 , 界面打开后 , 默认显示该样式*/
a:link {
color: blue;
}
/*已访问链接:点击过的链接*/
a:visited {
color: red;
}
/*鼠标移动到链接:鼠标移动到 链接 上方*/
a:hover {
color: purple;
}
/*选定链接:按下鼠标松开时*/
a:active {
color: orange;
}
</style>
</head>
<body>
<a href="#">链接伪类选择器1</a>
<a href="#">链接伪类选择器2 参照组</a>
</body>
</html>
display effect :
- Default state: The default state after opening is blue;
- Move the mouse over the link and it will turn purple;
- Click and release the mouse and it will turn orange;
- After the entire process is completed, the links will turn red. This is because both links are #, and once accessed, they will become accessed at the same time;
