CSS3 结构伪类(:first-child)

最新推荐文章于 2024-07-28 18:09:15 发布

houyanhua1

最新推荐文章于 2024-07-28 18:09:15 发布

阅读量458

点赞数

本文链接：https://blog.csdn.net/houyanhua1/article/details/79635607

版权

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
	<style>
		/* 伪类(表示一种状态)  :hover  :link  :active  :visited; */
		ul {
			margin: 0 auto;
			padding: 0;
			list-style: none;
			width: 800px;
			text-align: center;
		}

		li {
			height: 50px;
			border: 1px solid #000;
			line-height: 50px;
			margin-top: -1px;
		}

		/* 结构伪类 :first-child 表示其父元素下的第一个孩子结点(必须是该类型的元素);*/
		li:first-child {
			background-color: red;
		}

		/* :last-child 表示其父元素下的最后一个孩子结点;*/
		li:last-child {
			background-color: red;
		}

		/* :nth-child(5) 第几个结点 */
		li:nth-child(5) {
			background-color: pink;
		}

		/* :nth-child(odd) 第奇数个结点 */
		li:nth-child(odd) {
			background-color: yellow;
		}

		/* :nth-child(even) 第偶数个结点 */
		li:nth-child(even) {
			background-color: blu