[css] nth-of-type与nth-child

还有它的兄弟姐妹
nth-last-child

怎么用的精简的话概括下列现象

    <div class="layoutWrap">
        <div class="halfPart"></div>
        <div class="breakline"></div>
        <div class="halfPart"></div>
    </div>
<style>
.layoutWrap > .halfPart:nth-of-type(2){
        left:50%;
        right:0;
        background:pink;
    }
</style>
//实际上作用不到因为:首先会找到所有class名为halfPart的标签,然后按不同标签名分为不同组。每组中按原先DOM元素顺序结构排列,挑选出其中halfPart排在第二个元素
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 刚开始学习选择器,一开始对伪类选择器确实有点懵。昨天晚上自己动手写了写,终于是慢慢搞懂了。下面对一些容易误解的一些...
    婷楼沐熙阅读 2,519评论 4 7
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,232评论 0 1
  • 使用纯 CSS 实现 500px 照片列表布局 文章很长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读...
    HZ充电大喵阅读 2,686评论 0 4
  • 网络世界是现实世界的延伸,明白这个道理,有些事就好理解了。
    SnailRen阅读 125评论 0 0
  • 第二讲作业 1、继续对对子 为奴十二载——从役数十年 这个杀手不太冷——那位画家非常美 彗星来的那一夜——台风到的...
    宁莫之阅读 430评论 1 0