css3伪类元素

最新推荐文章于 2023-07-13 20:19:13 发布

前端-文龙刚

最新推荐文章于 2023-07-13 20:19:13 发布

阅读量152

点赞数

分类专栏： html+css 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_17211063/article/details/128373291

版权

html+css 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>css3伪类元素</title>
	<style type="text/css">
		*{margin:0;padding:0;list-style-type:none;}
		ul{margin:200px auto;width:200px;}
		a{color:#666;}
		a:link{background-color:red;}
		a:hover{background:;}
		a:active{background:blue !important;}
		a:visited{background:yellow;}
		
		.ul-2 li:nth-child(3n){background:red;}
	</style>
</head>
<body>
	<!--
	a:after
	a:before
	a:link 没有访问之前a标签的样式
	a:visited 已访问a标签的样式
	a:hover a标签鼠标移上的样式
	a:active a标签鼠标按下的样式
	input:focus input表单元素获取焦点
	input:blur input表单元素失去焦点
	
	----CSS3新增的伪类选择器：-----
	:checked 被选中 主要用在input表单元素上
	:nth-last-child(n+3) 排除前三个，从第四个开始
	:nth-child(2n) 获取2的倍数所有元素
	:not(:last-child) 排除最后一个元素
	:last-child 最后一个元素
	:nth-child(n)  n表示具体的第几个  odd/2n+1 奇数 even/2n 偶数
	:only-child 仅仅/唯一的元素
	:nth-last-child(n) 倒数第几个元素  :nth-last-child(1) <=> :last-child
	:first-of-type 第一个同级兄弟元素
	:last-of-type 最后一个同级兄弟元素
	:only-of-type 只有一个同级兄弟元素
	:nth-of-type(n) 第几个同级兄弟元素
	:nth-last-of-type(n) 倒数第几个同级兄弟元素
	:nth-last-child(n+2) 这样获取除最后一个div中所有的div 
	:empty 空内容
	p:nth-of-type(5n+0){}一个列表从第五个开始
	-->
	<ul>
		<a href="http://www.baidu.com" target="_blank">我是测试的信息</</a>
	</ul>
	<ul class="ul-2">
		<li>哈哈哈哈</li>
		<li>哈哈哈哈</li>
		<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>