css 伪类选择器(链接伪类选择器、结构伪类选择器、目标伪类选择器)
链接伪类选择器:顾名思义就是用于链接的伪类选择器。a的伪类标签有:a:link、a:visited、a:hover、a:active
,a:link表示的是未访问的链接,a:visited表示已访问的链接 ,a:hover表示鼠标移动到链接上,a:active表示的是选定的链接(当我们点击别松开鼠标,显示的状态)
现在来演示一下,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
a:link {
font-size: 16px;
color: gray;
font-weight: 700;
}
a:visited {
font-size: 16px;
color: orange;
font-weight: 700;
}
a:hover {
font-size: 16px;
color: red;
font-weight: 700;
}
a:active {
font-size: 16px;
color: green;
font-weight: 700;
}
</style>
</head>
<body>
<div>
<a href="#" >房间里面是一具已经腐烂的尸体,腐臭让人难以接受。</a>
<a href="#" >办案的刑警正在仔细地收集者证据。</a>
</div>
</body>
</html>
效果如下:
过多的效果的效果不演示了,在html上已经详细的讲过了,可以去翻一翻之前的文章。
结构伪类选择器:根据文档结构来选择。
li:first-child
:第一个li。
li:last-child
:最后一个li。
li:nth-child(n):
n代表的就是第几个li,n=4的话就是第四个li。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
li:first-child {
color: pink;
}
li:last-child {
color: purple;
}
li:nth-child(2) {
color: skyblue;
font-size: 12px;
}
li:nth-child(3) {
color: green;
font-size: 12px;
}
</style>
</head>
<body>
<ul>
<li>静夜思</li>
<li>李白</li>
<li>唐</li>
<li>床前明月光,</li>
<li>疑是地上霜。</li>
<li>举头望明月,</li>
<li>低头思故乡。</li>
</ul>
</body>
</html>
效果如下:
li:nth-child(odd)
:排在奇数的li。
li:nth-child(even)
:排在怕偶数的li。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
li:nth-child(odd) {
color: pink;
}
li:nth-child(even) {
color: deeppink;
}
</style>
</head>
<body>
<ul>
<li>望庐山瀑布</li>
<li>【作者】李白</li>
<li>【朝代】唐</li>
<li>日照香炉生紫烟</li>
<li>遥看瀑布挂前川。</li>
<li>飞流直下三千尺,</li>
<li>疑是银河落九天。</li>
</ul>
</body>
</html>
效果如下:
li:nth-child(2n/3n/4n)
:2n是指第0、2、4、6、8等个li。3n是指第0、3、6、9、12等个li。4n是指第0、4、8、12、16等个li。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
li:nth-child(3n) {
color: pink;
}
</style>
</head>
<body>
<ul>
<li>赠汪伦</li>
<li>【作者】李白</li>
<li>【朝代】唐</li>
<li>李白乘舟将欲行,</li>
<li>忽闻岸上踏歌声。</li>
<li>桃花潭水深千尺,</li>
<li>不及汪伦送我情。</li>
</ul>
</body>
</html>
效果如下:
li:nth-child(even/odd/3n/n)
:从第一个li开始数的。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
li:nth-child(even) {
color: pink;
}
</style>
</head>
<body>
<ul>
<li>白雪歌送武判官归京</li>
<li>【作者】岑参</li>
<li>【朝代】唐</li>
<li>北风卷地白草折,胡天八月即飞雪。</li>
<li>忽如一夜春风来,千树万树梨花开。</li>
<li>散入珠帘湿罗幕,狐裘不暖锦衾薄。</li>
<li>将军角弓不得控,都护铁衣冷难着。</li>
<li>瀚海阑干百丈冰,愁云惨淡万里凝。</li>
<li>中军置酒饮归客,胡琴琵琶与羌笛。</li>
<li>纷纷暮雪下辕门,风掣红旗冻不翻。</li>
<li>轮台东门送君去,去时雪满天山路。</li>
<li>山回路转不见君,雪上空留马行处。</li>
</ul>
</body>
</html>
效果如下:
li:nth-last-child(even/odd/3n/n)
:从最后一个开始数。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
li:nth-last-child(even) {
color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>白雪歌送武判官归京</li>
<li>【作者】岑参</li>
<li>【朝代】唐</li>
<li>北风卷地白草折,胡天八月即飞雪。</li>
<li>忽如一夜春风来,千树万树梨花开。</li>
<li>散入珠帘湿罗幕,狐裘不暖锦衾薄。</li>
<li>将军角弓不得控,都护铁衣冷难着。</li>
<li>瀚海阑干百丈冰,愁云惨淡万里凝。</li>
<li>中军置酒饮归客,胡琴琵琶与羌笛。</li>
<li>纷纷暮雪下辕门,风掣红旗冻不翻。</li>
<li>轮台东门送君去,去时雪满天山路。</li>
<li>山回路转不见君,雪上空留马行处。</li>
</ul>
</body>
</html>
效果如下:
目标伪类选择器::target:选择该文档中特定“id”的元素。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
:target
{
border: 2px solid #d56d3d;
height: 50px;
font-size: 20px;
text-align: center;
line-height: 50px;
background-color: #00a4ff;
color: purple;
}
</style>
</head>
<body>
<h1>找一找我在哪里?</h1>
<p><a href="#zheli">它在这里!!</a></p>
<p><a href="#zhebian">躲在这里了!!</a></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="zheli"><b>我在这里</b></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="zhebian"><b>我在这边.</b></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
首先打开的页面是这样的:
当我们点击第一链接的时候,就变成:
当我们点击第二链接的时候,就变成: