纯CSS制作选项卡----:target的重要性

最新推荐文章于 2021-12-16 11:00:57 发布

Kong_十六

最新推荐文章于 2021-12-16 11:00:57 发布

阅读量206

点赞数

分类专栏： # Web—CSS初级 Web—第一阶段文章标签：链接伪类最简单选项卡

本文链接：https://blog.csdn.net/qq_42383764/article/details/104128477

版权

Web—第一阶段同时被 2 个专栏收录

25 篇文章 2 订阅

订阅专栏

Web—CSS初级

21 篇文章 0 订阅

订阅专栏

:target是链接伪类的一种

:target表示一个特殊的元素它的id是URL的片段标识符

换句话说就是有id属性的元素，同时id的属性值是URL的标识符

举个例子：做一个简单的选项卡原理是一样的，回头还可以做一个漂亮一点的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>target应用</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				height: 300px;
				background-color: pink;
				margin: 20px ;
				font: 24px/300px "arial black";
				text-align: center;
				/* 未点击连接时，不出现选项卡 */
				display: none;
			}
			a{
				text-decoration: none;
				font: 24px "arial black";
				text-align: center;
				margin: 20px;
			}
			
			a:visited{
				color:saddlebrown;
			}
			a:hover{
				text-decoration: underline;
				color: red;
			}
			
			:target{
				/* id属性值与URL片段标识符一样时，显示块级元素 */
				display: block;
			}
			
		</style>
	</head>
	<body>
		<!-- 
			这里的div的id属性值与连接中的URL一样“box1、box2、box3”
			所以：target伪类可以选中
		-->
		<a href="#box1">div1</a>
		<a href="#box2">div2</a>
		<a href="#box3">div3</a>
		<div id="box1">div1</div>
		<div id="box2">div2</div>
		<div id="box3">div3</div>
		
	</body>
</html>

Kong_十六

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
纯CSS制作选项卡----:target的重要性

:target是链接伪类的一种:target表示一个特殊的元素它的id是URL的片段标识符换句话说就是有id属性的元素，同时id的属性值是URL的标识符举个例子：做一个简单的选项卡原理是一样的，回头还可以做一个漂亮一点的<!DOCTYPE html><html> <head> <meta charset="utf-8"&...
复制链接

扫一扫