p:first-child
选择第一个子元素（p是body的子元素）但是当第一个不是p则什么都选不到 这个的意思是不仅要是第一个还要同时是p元素
p:last-child
last是指所有的父元素中最后一个子元素 这里前面标签为p所以最后的子元素也得同时是p不然没用
p:nth-child(2)
这个可以选中指定位置的子元素 括号中填入几就会选择所有父元素中对应位置的为p的子元素
当括号内填入even 则选择偶数位置的子元素
填入odd 选择奇数位置的子元素
p:first-of-type
选择父元素中第一个为p的子元素
p可以换为其他标签 同时 也可在p的前面指定对应的父元素 如 div p:first-child
指定div父元素中第一个且为p的子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style "type:text/css">
p:first-child{
font-size:100px ;
}
p:last-child{
color: cyan ;
}
/*first-child选择第一个子元素（p是body的子元素）
但是当第一个不是p则什么都选不到 这个的意思是不仅要是
第一个还要同时是p元素 last是指所有的父元素中最后一个子元素
这里前面标签为p所以这个子元素也得同时是p不然没用*/
p:nth-child(2){
color:yellow;
}
/*这个可以选中指定位置的子元素
当括号内填入even 则选择偶数位置的子元素
填入odd 选择奇数位置的子元素*/
p:first-of-type{
background-color: black;
}
/*选择父元素中第一个为p的子元素*/
</style>
</head>
<body>
<span>啥笔</span>
<p>打你？？</p>
<p>就是打你</p>
<p>大丢是你</p>
<div >
<p>劳资个你</p>
</div>
<!--
这个p是div的第一个子元素
但是可以通过在p:first-child前加上指定父元素来指定
某个确定的第一个子元素
-->
<p>大丢是你啊？</p>
</body>
</html>