<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
为第一个p标签设置一个背景标签
:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
/
/ body > p:first-child {
background-color: yellow;
} */
/* p:last-child {
background-color: green;
} */
/*
:nth-child(index)可以选中任意index位子的元素，1开始
index 该选择器后边可以指定一个参数，指定要选中第几个子元素
even 表示偶数位子的子元素
odd 表示奇数位子的子元素
*/
/* p:nth-child(2) {
background-color: green;
}
p:nth-child(odd) {
background-color: blue;
} */
/*
:first-of-type
:last-of-type
:nth-of-type()
和 :first-child这些非常的类似
只不过child，是在所有的子元素中排列
而type，是在当前类型的子元素中的排列
*/
p:first-of-type {
background-color: yellow;
}
</style>
</head>
<body>
<span>我是第一个span</span>
<p>我是body里面的第一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是body的最后一个p标签</p>
<span>我是最后一个span</span>
<div>
<p>我是div里面的第一个p标签</p>
<p>我是div里面的最后一个p标签</p>
</div>
</body>
</html>
网友评论