css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）

最新推荐文章于 2024-04-14 14:25:59 发布

潜龙卧湖

最新推荐文章于 2024-04-14 14:25:59 发布

阅读量5.5k

点赞数 33

文章标签：伪类选择器前端 css

本文链接：https://blog.csdn.net/weixin_44046450/article/details/93185954

版权

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>

首先打开的页面是这样的：
在这里插入图片描述
当我们点击第一链接的时候，就变成：
当我们点击第二链接的时候，就变成：

潜龙卧湖

关注

33
点赞
踩
133

收藏

觉得还不错? 一键收藏
0
评论
css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）

css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器链接伪类选择器：顾名思义就是用于链接的伪类选择器。a的伪类标签有:a:link、a:visited、a:hover、a:active，a:link表示的是未访问的链接，a:visited表示已访问的链接，a:hover表示鼠标移动到链接上，a:active表示的是选定的链接（当我们点击别松开鼠标，显示的状态）现在来演示一下，代...
复制链接

扫一扫