zoukankan      html  css  js  c++  java
  • nth-child,nth-of-type

    首先,这两个选择器是用来干什么的? 举例子 p:nth-child(1);这个选择器选择的是p所有父辈元素中第一个子元素,且这个子元素为p,此时就生效。 p:nth-of-type(1);这个选择器选择的是p所有父辈元素中所有p元素集合中第一个p元素生效。 看下面的例子
    div11111111

    111111111111

    222222222222

    s111111111111

    s2222222222222

    css .p1:nth-of-type(1){ background-color: red; } 这时候,11111111和s11111111会变红。首先选择的是.p1的所有父辈元素中所有.p1元素集合中第一个,所以就是1111111和s111111 如果是.p1:nth-child(1)则只有s11111111会变红,原因是.p1所有父辈元素( .div1 和 .div11)然后找到他们下面的第一个元素并且是.p1的,而.div1下面的第一个元素是div不是.p1所以无法满足,所以不显示,.div11下面的第一个元素是.p1所以就显示了。 这两个选择器还有好多功能呢. :nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同 :nth-child(-n+4)选取小于等于4标签 :nth-child(2n)选取偶数标签,2n也可以是even :nth-child(2n-1)选取奇数标签,2n-1可以是odd :nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一” :last-child选取最后一个标签 :nth-last-child(3)选取倒数第几个标签,3表示选取第3个
  • 相关阅读:
    linux静态链接库
    查看进程运行时间
    进程间同步-互斥量
    Linux——多线程下解决生产消费者模型
    Linux——线程
    浅谈智能指针的历史包袱
    C++ 模板基础
    用信号量为共享内存添加同步机制
    Linux——浅析信号处理
    浅析fork()和底层实现
  • 原文地址:https://www.cnblogs.com/yuaima/p/5878097.html
Copyright © 2011-2022 走看看