您的位置：首页 > 其它

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

2021-09-04 15:00 78 查看

结构伪列选择器

带：冒号的就是伪类

  • 结构伪列就是要带定位的--首个，末个，选择 --
  • 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

    • 内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航