css3子选择器（选择某个标签做内容）
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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知