结构伪列选择器超详解，讲懂你！！

结构伪列选择器

带：冒号的就是伪类

  • 结构伪列就是要带定位的–首个，末个，选择 —
  • 1.带不带子元素—-要不要核对类型 2.子元素是否被空格取代— 空格可以理解为全部（通配）3.没空格的
    • 1.first-child
      • 父元素 子元素:first-child{ //表示满足父元素类型下的第一个子元素(总排序)}
        • 符合子元素的类型就显示，没有就不显示
      • 父元素 空格 :first-child{ //表示满足父元素类型的下的第一个子元素(总排序的第一个)}
    • 2.last-child
      • 父元素 子元素:last-child{ //表示满足父元素类型下的最后一个子元素(总排序)}
        • 符合子元素的类型就显示，如果没有，，则不显示—
      • 父元素 空格 :last-child{ //表示满足父元素类型下的最后一个子元素(总排序的最后一个)}）
    • 3.nth-child(n) —n指的是总共的第n个
      • ①父元素 子元素:nth-child(n){//表示父元素下的第n个元素(不分类型的排序)。}
        • 核实第n个是不是子元素类型，不是就不显示 一个个挨着排号
        • 比如div p:nth-child(2)表示div下的第二个p元素、如果不是p元素则没有匹配的元素(就没表现)
      • ②父元素 空格 :nth-child(n){//表示父元素下的第n个元素(不分类型的排序,就是第n个)。}
        • 只要第n个元素存在就会表现
      • ③XX元素:nth-child(n){//表示每一层（包括body）的第n个XX元素}
        • 每一层总排序后的第n个如果是XX元素，则显示
    • 4.nth-of-type(n)—n指的是类型的第n个—所以可能很多个
      • nth-of-type(n) —肯定分类型的指定
      • ①父元素 子元素:nth-of-type(n) {//表示父元素下的子类型的第ｎ个元素，没的话不显示(分类型的指定)}
        • 比如div p:nth-of-type(2)表示div下ｐ类型的第二个元素 –依据类型进行排号选择
      • ②父元素 空格 :nth-of-type(n) –表示父元素下的每个类型的第n个元素，
        • div :nth-of-type(n) 分类型
        • 每个类型的第n个都被选中
      • ③XX元素:nth-of-type(n) –表示XX元素下XX类型的第n个元素—分类型
    • 5.child和type 的最大区别
      • 总的来说 child 是总排序，第n个存在（指定的就得复核）就显示 type是类型排序，类排序的第n个存在就显示

——————————————————–更多java学习 https://zhangjzm.gitee.io/self_study

版权声明：本文为zjz0818原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zjz0818/p/15226669.html