HTML5——CSS3新增伪类选择器（常用）

最新推荐文章于 2024-07-09 15:35:41 发布

潇雪凌宇

最新推荐文章于 2024-07-09 15:35:41 发布

阅读量897

点赞数 2

分类专栏： HTML5 文章标签： HTML5 CSS 伪类选择器

本文链接：https://blog.csdn.net/weixin_44407699/article/details/98306126

版权

本文介绍了HTML5和CSS3中的常用伪类选择器，包括结构性伪类选择器如:first-child, :last-child等，以及UI元素状态伪类选择器如:link, :visited, :active等。通过实例代码展示了不同伪类选择器的效果，帮助读者理解和应用这些选择器。" 120043395,11387826,使用CRITIC-EWM的综合权重法,"['数据处理', '数据分析', 'Python编程']

摘要由CSDN通过智能技术生成

结构性伪类选择器

:first-child 第一个子节点、:last-child 最后1个子节点、:nth-child(n) 第n个子节点、:nth-last-child(n) 倒数第n个子节点、:only-child 唯一的子节点

:nth-child(n)、:nth-last-child(n)还有一些特殊用法，通过括号内的东西来限制选择：

1、odd/event:第奇数个/偶数个元素

2、xn+y：第xn+y个元素

话不多说上代码，下面是对li标签设置伪类选择器

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		li:first-child{
			border: 1px solid black;
		}

		li:last-child{
			background-color: #aaa;
		}

		li:nth-child(2){
			color: #888;
		}

		li:nth-last-child(2){
			font-weight: bold;
		}

		span:only-child{
			font-size: 30pt;
		}
	</style>
</head>
<body>
	<ol>
		<li>oaaaaaaaaaaa</li>
		<li>obbbbbbbbbbb</li>
		<li>occccccccccc</li>
		<li>odddddddddd</li>
		<li>oeeeee</li>
        &

最低0.47元/天解锁文章

潇雪凌宇

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5——CSS3新增伪类选择器（常用）

结构性伪类选择器:first-child 第一个子节点、:last-child 最后1个子节点、:nth-child(n) 第n个子节点、:nth-last-child(n) 倒数第n个子节点、:only-child 唯一的子节点:nth-child(n)、:nth-last-child(n)还有一些特殊用法，通过括号内的东西来限制选择：1、odd/event:第奇数个...
复制链接

扫一扫

专栏目录