CSS link styles

CSS link style:

a :link (not visited)

#a:hover

a:visited (visited: actually reached that page)

a:active (between mouse click and release) (interval, has no effect on a objects without href attributes)

These elements have different order when defining CSS, which will directly lead to different link display effects.

Specificity is sorted from general to special: link--visited--hover--active

The desired effect can be achieved as follows:

a:link {color: blue}

a:visited{color: red}

##a:hover{color: yellow}

a:active{color: white}

If defined like this:

a:hover{color: yellow}

a:link{color: blue}

a:visited{color: red}

a:active{color: white}

You can’t see hover It works, because :link is the most general effect and its scope is greater than hover, so the previous sentence is covered.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>链接样式</title>
<style>
a:link {background-color:#B2FF99;}    /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;}   /* mouse over link */
a:active {background-color:#FF704D;}  /* selected link */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个 link</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b> active必须在hover之后定义是有效的.</p>
</body>
</html>

Continuing Learning

new file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>链接样式</title>
 <style>
 body {background-color:#eaeaea}
 a#textColorStyle:link {color:#FF0000;} /* 未被访问的链接 */
 a#textColorStyle:visited {color:#00FF00;} /* 已被访问的链接 */
 a#textColorStyle:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
 a#textColorStyle:active {color:#0000FF;} /* 正在被点击的链接 */
 a#underlineStyle:link {text-decoration:none;}
 a#underlineStyle:visited {text-decoration:none;} 
 a#underlineStyle:hover {text-decoration:underline;} 
 a#underlineStyle:active {text-decoration:underline;} 
 a#bgStyle:link {background-color:#B2FF99;}
 a#bgStyle:visited {background-color:#FFFF85;}
 a#bgStyle:hover {background-color:#FF704D;}
 a#bgStyle:active {background-color:#FF704D;}
 </style>
</head>
<body>
 <!--能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 
     等等）。链接的特殊性在于能够根据它们所处的状态来设置它们的样式。-->
 <h3>链接的状态</h3>
 <ul>
 <li>a:link - 普通的、未被访问的链接</li>
 <li>a:visited - 用户已访问的链接</li>
 <li>a:hover - 鼠标指针位于链接的上方</li>
 <li>a:active - 链接被点击的时刻</li>
 </ul>
 <p><a id="textColorStyle" href="http://www.baidu.com" target="_blank" title="访问百度">这是一个链接</a></p>
 <p><b>注释：</b>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX