子元素选择器

最新推荐文章于 2022-10-30 12:46:06 发布

chen_zan_yu_

最新推荐文章于 2022-10-30 12:46:06 发布

阅读量198

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/chen_zan_yu_/article/details/88917514

版权

CSS 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			 * 为第一个p标签设置一个背景色为黄色
			 * ：first-child可以选中第一个子元素
			 * :last-child可以选择最后一个子元素
			 * ：nth-child可任意选中子元素
			 * 		该选择器后边可以指定选中要选的子元素
			 * 		even表示偶数位置的子元素
			 * 		odd表示奇数
			 * 
			 */
			body > p:first-child{
				background-color: yellow;}
			p:last-child{
				background-color: red ;
			}
			p:nth-child(even){
				background-color: yellowgreen;
			
			}
			/*
			 * :first-of-type
			 * :last-of-type
			 * :nth-of-type
			 * 		和：first-child这些非常的相似，
			 * 		只不过child，是在所有的子元素中的排列
			 * 		而type，是在当前类型中的子元素中的排列
			 * 
			 */
			p:first-of-type{
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<!--<div >
			<p>我是一个p标签</p>
		</div>-->
		<p>我是一个p标签</p>
	</body>
</html>

chen_zan_yu_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
子元素选择器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* * 为第一个p标签设置一个背景色为黄色 * ：first-child可以选中第一个子元...
复制链接

扫一扫

专栏目录