判断子元素个数

最新推荐文章于 2023-03-13 13:15:45 发布

墨墨博客

最新推荐文章于 2023-03-13 13:15:45 发布

阅读量2.1k

点赞数

分类专栏： css3 html5 文章标签： css html

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/53216296

版权

css3 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

html5

30 篇文章 1 订阅

订阅专栏

如果.list里面的li元素大于等于4，则显示红色，并且字体变成30px

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.list li:nth-last-child(n+4) ~ li, .list li:nth-last-child(n+4):first-child{//
			color:red;
			font-size:30px;
		}
	</style>
</head>
<body>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>		<!-- <li>43</li> <li>43</li><li>r</li> --></ul></body></html>



可以把注释去掉验证一下


:nth-last-child(n+4) ~ li 这个表示倒数第四个及之前（第n+4）的的li元素
:nth-last-child(n+4):first-child  这个表示倒数第n+4的第一个li元素