Link pseudo-classes link: represents all the anchor as a hyperlink, and point to a non-accessible address
Link pseudo-classes can not be added to the div
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = " UTF-. 8 " >
<title> </ title>
<-:! Link: represented as a hyperlink, and an address pointing to all unvisited anchor ->
<style type = " text / CSS " >
A {
text - Decoration: none;
}
A: {Link
Color: Red;
}
#test: Link {
background: Pink;
}
</ style>
</ head>
< body>
<a href="#"> Point I ordered I ordered my </a>
<div the above mentioned id = " the Test " > I am a div friends </ div>
</ body>
</ HTML>
Link pseudo-classes visited: represents all the anchor as a hyperlink, and point to a visited addresses
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = " UTF-8 " >
<title> </ title>
<-:! Visited: expressed as a hyperlink, and point to the address of a visited all anchors ->
<style type = " text / CSS " >
A {
text - Decoration: none;
}
A: {Link
Color: Blue;
}
A: visited {
Color: Red;
}
</ style>
</ head>
<body >
<a href="#"> Point I ordered I ordered my </a>
</ body>
</ HTML>
Pseudo-class link target: represents a particular element, id is the element fragment identifier URI.
It can be used to write a target div switch
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = " UTF-. 8 " >
<title> </ title>
<-:! Representative of a particular target element, id is the element of the URI fragment identifier . ->
<style type = " text / CSS " >
* {
margin: 0 ;
padding: 0 ;
}
div {
width: 300px by;
height: 200px;
Line - height: 200px;
background: Black;align: center;
display: none;
}
:target{
display: block;
}
</style>
</head>
<body>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<div id="div3">
div3
</div>
</body>
</html>
Dynamic pseudo-classes: into: hover, removed: active
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test:hover{
color: pink;
}
#test:active{
color: red;
}
</style>
</head>
<body>
<div id="test">
我是test
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: black;
display: block;
}
a:hover{
font-size:24px;
/ * Color: Red; * /
}
A: Link {
font - size: 48px;
/ * Color: Pink; * /
}
A: visited {
/ * font-size: 96PX; * /
/ * Color: DeepPink; * /
}
</ style>
</ head>
<body>
<a href= "#1"> I is a first tab </a>
<a href= "#2"> I is a second tab </ a>
<a href= "#3"> I was the third a tag </a><a
href= "#4"> I am a fourth label </a>
<a href= "#5"> I am a fifth label </a>
<a href= "#6"> I tag is a sixth </a>
</ body>
</ HTML>