HTML与CSS基础之子元素的伪类(七)

xiayiye5

于 2017-03-13 16:24:25 发布

阅读量290

点赞数

分类专栏： HTML和CSS基础文章标签： HTML CSS 基础子元素伪类

本文链接：https://blog.csdn.net/xiayiye5/article/details/61920282

版权

HTML和CSS基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>子元素的伪类</title>
		<style type="text/css">
			/*span:first-child {
				background-color: #FF0000;
			} //表示第一个元素,并且必须是span类型才可以改变背景色*/
			/*span:last-child {
				background-color: aquamarine;
			} //表示最后一个元素,并且必须是span类型才可以改变背景色*/
			/*span:first-of-type {
				background-color: cornflowerblue;
			} //表示span的第一个元素*/
			/*span:last-of-type {
				background-color: cornflowerblue;
			} //表示span的最后一个元素*/
			
			/*span:nth-child(3) {
				background-color: deeppink;
			} //括号是几,就表示第几个元素设置颜色,并且不分类型*/
			span:nth-of-type(even) {
				background-color: deeppink;
			} //括号是几,就表示span第几个元素设置颜色,并且区分类型,括号里面odd表示单数,even表示偶数
		</style>
	</head>

	<body>
		<p>我是第一个P元素</p>
		<span>我是第一个span元素</span>
		<span>我是第二个span元素</span>
		<span>我是第三个span元素</span>
		<span>我是第四个span元素</span>
		<span>我是第五个span元素</span>
	</body>

</html>

xiayiye5

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS基础之子元素的伪类(七)

子元素的伪类 /*span:first-child { background-color: #FF0000; } //表示第一个元素,并且必须是span类型才可以改变背景色*/ /*span:last-child { background-color: aquamarine; } //表示最后一个元素,并且必须是span类型才可以改变背景色*/
复制链接

扫一扫

专栏目录