HTML&CSS基础-子元素的伪类选择器
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.html的源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子元素的伪类选择器</title>
<style>
/**
*
* 子元素的伪类装饰器:
* :first-child
* 可以选中第一个子元素
* :last-child
* 可以选中最后一个子元素
* :nth-child(num)
* 可以选中任意位置的子元素;
* 如果不写num的值则默认为1，效果和":first-child"伪类相同了;
* 如果num的值为"even"，则表示偶数位置子元素
* 如果num的值为"odd",则表示奇数位置子元素
*
* 可选择类型:
* :first-of-type
* :last-of-type
* :nth-of-type
* 以上元素和":first-child",":last-child",":nth-child(num)"这些非常类似;
* 只不过first-child",":last-child",":nth-child(num)"是在所有的子元素中排列。
* 而":first-of-type",":last-of-type",":nth-of-type"是在当前类型的子元素中排列
*
*/ /**
* 案例一:
* 为第一个p标签(该标签必须是第一个标签)设置一个背景颜色为黄色
*/
p:first-child{
background-color: yellow;
} /**
* 案例二:
* 为最后一个p标签(该标签必须是最后一个标签)设置背景颜色为棕色
*/
p:last-child{
background-color: brown;
} /**
* 案例三:
* 选择第三个位置的子元素将其背景设置为洋红色
*/
p:nth-child(3){
background-color: magenta;
} /**
* 案例四:
* 选择所有子元素的第一个p标签并将其背景颜色设置为红色
*/
p:first-of-type{
background-color: red;
} /**
* 案例五:
* 选择所有子元素的最后一个p标签并将其背景颜色设置为蓝色
*/
p:last-of-type{
background-color: blue;
}
</style>
</head>
<body> <p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<div>
<p>我是第一个div的一个p标签</p>
<p>我是第一个div的一个p标签</p>
<p>我是第一个div的一个p标签</p>
<p>我是第一个div的一个p标签</p>
<span>我是第一个div的span标签</span>
</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<div>
<span>我是第二个div的span标签</span>
<p>我是第二个div的一个p标签</p>
<p>我是第二个div的一个p标签</p>
<p>我是第二个div的一个p标签</p>
<p>我是第二个div的一个p标签</p>
<p>我是第二个div的一个p标签</p>
</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是body的span标签</span> </body>
</html>
二.浏览器打开以上代码渲染结果