CSS3中新增了几个子元素选择器，大大提高了开发者的开发效率。之前有些要通过为一个个子元素添加class，或者js实现才能实现的效果。现在可以很方便的用选择器实现。
这些新的样式已被现代浏览器及IE9以上支持。
选择器 说明
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(3) 第三个子元素
:nth-last-child(3) 倒数第三个子元素
:nth-child(odd) 所有奇数个子元素
:nth-child(even) 所有偶数个子元素
div h2:nth-of-type(even) div 中所有的h2元素中，所有的偶数元素(只针对同类型子元素计算)
:nth-last-of-type 反过来计算
li:nth-child(4n+1) 循环样式 匹配第1，5，9...个li
li:nth-child(4n+2) 循环样式 匹配第2，6，10...个li
li:nth-child(4n+4) 可简写为 li:nth-child(4n)
ul li:first-child:last-child 是第一个也是最后一个，即匹配ul中只有一个li.
:only-child 上面的简写形式。匹配某个父元素只有一个子元素
h2:nth-child(3) 与 h2:nth-of-type(3) 的区别？
h2:nth-child(3) 指 第三个子元素中正好是h2则应用该样式
h2:nth-of-type(3) 指所有的h2子元素的合集中，对第三个h2应用该样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*选择的是#hd里第一个p标签*/
#hd p:first-of-type{
color: blue;
font-size: 25px;
}
/*选择的是#hd里最后一个p标签*/
/*#hd p:last-of-type{
color: purple;
font-size: 25px;
}*/
/*如果div中只有一个p标签,就选中这个p标签（div可以有其它兄弟元素）*/
/*div p:only-of-type{
color: orange;
font-size: 25px;
}*/
/*选择的是div中独生子的(要求这个p标签没有任何兄弟元素)p标签*/
/*div p:only-child{
color: orange;
font-size: 25px;
}*/
/*选择的是div中第3个元素，并且要求第3个元素是p标签可以选中（如果第三个标签不是p标签选不中的）*/
/*div p:nth-child(3){
color: red;
font-size: 25px;
}*/
/*选择的是div中倒数第6个元素，并要求....*/
/*div p:nth-last-child(6){
color: orange;
font-size:60px;
}*/
/*选择的是div中第4个的p标签*/
/*div p:nth-of-type(4){
color: red;
font-size: 26px;
}*/
/*选择的是div中倒数第2个的p标签*/
/*div p:nth-last-of-type(2){
color: red;
font-size: 26px;
}*/
/*选择的是每个div里第一个span标签,并且要求第一个标签符合冒号前面的选择器的要求(简单说就是每个div第一个span标签)*/
div span:first-child{
color: blue;
font-size: 26px;
}
/*选择的是每个div里最后一个p标签*/
div p:last-child{
color: orange;
font-size: 26px;
}
</style>
</head>
<body>
<div id="hd">
<span>这个是psan标签里的内容</span>
<p>科比支持湖人交易浓眉：湖人这3人远不如他01</p>
<p>特雷杨：今年新秀都很出色 但我才是最好的一个02</p>
<p>广厦险胜浙江扳平总比分 胡金秋狂砍34+1603</p>
<p>网友调侃詹皇被封盖 34岁的他真的老了？04</p>
<p>综述：诺天王得分超张大帅 马刺击败勇士取九连胜05</p>
<p>巴萨欲贱卖1.6亿帝星 曼联出1亿欧就能带走这位全能攻击手06</p>
<p>美股高开低走终结四连涨 AMD大涨近12%07</p>
<p>如何把苍白的人生包装成牛逼闪闪的简历？08</p>
<p>对于小Z的吐槽，我已经司空见惯了09</p>
</div>
<div>
<span>666666span</span>
<p>但是小Z进组以后发现他们对前端自动化没有什么了解</p>
</div>
<div>
<p>用vue的页面仔还是页面仔，哈哈~</p>
<p>用vue的页面仔还是页面仔，哈哈~</p>
</div>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7417.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知