伪类2

最新推荐文章于 2024-08-14 12:55:09 发布

qq_34786755

最新推荐文章于 2024-08-14 12:55:09 发布

阅读量74

点赞数

分类专栏： html 结构型伪类文章标签： js html

本文链接：https://blog.csdn.net/qq_34786755/article/details/113527036

版权

html 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

结构型伪类

1 篇文章 0 订阅

订阅专栏

伪类2

- - 伪类的分类
  - - 关键字

伪类的分类

1.状态伪类
状态伪类

2.结构性伪类

关键字

：first-child 选择元素的第一个子元素
：last-child 选择某个元素的最后一个子元素
：nth-child() 选择某个元素的一个或多个特定的子元素
：nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
：first-of-type 选择一个上级元素下的一个同类子元素

示例

<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>
		结构伪类器
		</title>
		<link rel="stylesheet" type="text/css" href="jiegouweilei.css"/>
	</head>
	<body>
		<p> 测试2</p><br>
		<p> 测试3</p><br>
		<p> 测试4</p><br>
		<p> 测试1</p><br>
		<p> 测试1</p><br>
		<table border="1" width="500" >
			<tr>
				<th>1</th>
				<th>1</th>
				<th>1</th>
			</tr>
			<tr>
				<th>1</th>
				<th>1</th>
				<th>1</th>
			</tr>
			<tr>
				<th>1</th>
				<th>1</th>
				<th>1</th>
			</tr>
		</label>
	</body>
</html>

p:first-child{
	/* 父元素 第一个才会被选中  第一行标签必须是p */
	background-color: #0000FF;
}
p:first-of-type{
	/* body 里面 第一个p标签里面的背景 */
	background-color: #FF0000;
}
p:last-child{
	/* body 里面最后一行p标签下 设置属性 */
	background-color: #0000FF;
}
p:nth-child(2){
	/**
	 * body 里面p标签第2个背景设置颜色
	 */
	background-color: red;
}
tr:nth-child(2){
	background-color: #FF0000;
}

在这里插入图片描述