伪元素-链接的四种伪类-其他伪类

最新推荐文章于 2022-10-20 11:00:12 发布

浪里小黑狼

最新推荐文章于 2022-10-20 11:00:12 发布

阅读量1.3k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_41398448/article/details/82825208

版权

html 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

伪元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素</title>
	<style>
		a{
			text-decoration-line: none;
		}
		a::before{
			content: url(image/1A$FD0BUN94I17TP7Y71TKB.png);
		}
		a::after{
			content: attr(href);
			margin-left: 20px;
		}
		.bigbox{
			width: 312px;
			height: 72px;	
		}
		.touxiang{
			width: 70px;
			height: 70px;
			border-radius: 50%;
			overflow: hidden;
			border: 1px solid #FFFFFF;
			display: inline-block;
		}
		.liaotiankuang{
			width: 234px;
			height: 60px;
			background-color: #E00D11;
			border: 1px solid #DE2626;
			border-radius: 10px;
			float: right;
			margin-top: 12px;
		}
	</style>
</head>

<body>
	<a href="https://hao.360.cn/">360导航</a>
	<div class="bigbox">
		<div class="touxiang" style="background-image: url(image/t0115feffa0647273b3.jpg)"></div>
		<div class="liaotiankuang"></div>
        <div class="touxiang" style="background-image: url(image/20140205123422_fPMWB.thumb.600_0.jpeg)"></div>
		<div class="liaotiankuang"></div>
	</div>
</body>
</html>

四种伪类

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链接的四种伪类</title>
</head>
<style>
	a{
		text-decoration: none;
	}
	/*未访问的连接*/
	a:link{
		color:#000000;
	}
	/*已经访问的连接*/
	a:visited{
		color:#8B8182;
	}
	/*鼠标划过的的连接*/
	a:hover{
		color:#FC080C;
	}
	/*已选中的连接*/
	a:active{
		color:#33C9D7;
	}
	/*hover必须置于link和visited的后面才有效果*/
	/*active必须置于hover的后面才有效果*/
	</style>
<body>
	<a href="https://hao.360.cn/">360导航</a>
</body>
</html>

其他伪类

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>其他伪类</title>
	<style>
		p{
			font-size: 16px;
			color:#3900E4;
		}
		/*first-letter  第一个字*/
		p:first-letter{
			font-size: 30px;
			color: #EAF414;
		}
		/*first-line  第一行*/
		p:first-line{
			font-size: 30px;
			font-weight: bold;
		}
		/*selection  选中的样子*/
		p::selection{
			background-color: #10D3C7;
		}
		ul{
			width: 100%;
			padding: 0;
		}
		ul li{
			width: 100%;
			height: 30px;
			list-style: none;
			background-color: #21CAAE;
		}
		/*nth-child 控制第n个标签  2n:等于偶数 2n+1等于奇数*/
		ul li:nth-child(2n+1){
			background-color: aqua;
		}
	</style>
</head>

<body>
	<p>吸哈哈</p>
	<p>
	怒发冲冠，凭栏处、潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲，白了少年头，空悲切！(栏 通：阑)</br>
靖康耻，犹未雪。臣子恨，何时灭！驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。(壮志 一作：壮士；兰山缺 一作：兰山阙)</p>
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
</body>
</html>