网页基础（三十四）结构化伪类选择器

最新推荐文章于 2024-09-10 18:52:07 发布

@大娱乐家

最新推荐文章于 2024-09-10 18:52:07 发布

阅读量229

点赞数

本文链接：https://blog.csdn.net/qq_41440413/article/details/104790101

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>结构化伪类选择器</title>
		<style>
			/*
			 * 相对于父元素的伪类
			 * li:first-child li的父元素的第一个子元素
			 * 如果父元素不是第一个标签不是li是找不到的
			 * 
			 */
			li:first-child{
				color: red;
			}
			/*
			 * 查找元素父元素最后一个为li的子元素
			 * 如果最后不是li是无效的
			 */
			li:last-child{
				color: blue;
			}
			/*
			 * 过滤非li的元素
			 */
			li:first-of-type{
				color: red;
			}
			/*
			 * li:nth-child(5)制定元素  索引值从1开始
			 */
			li:nth-child(5){
				color: #008000;
			}
			/*
			 * 奇偶行
			 */
			li:nth-child(odd){
				background-color: orange;
			}/*
			  * 没有内容的
			  */
			li:empty{
				background-color: palevioletred;
			}
		</style>
	</head>
	<body>
		<ul>
			<div>1</div>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>