结构伪列选择器超详解！！！！

结构伪列选择器

带：冒号的就是伪类

  • 结构伪列就是要带定位的--首个，末个，选择 --
  • 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)
        • 每一层总排序后的第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

posted @ 2021-09-04 15:00  狂哲  阅读(78)  评论(0)  编辑  收藏  举报