结构伪类选择器：nth-last-child()；nth-last-of-type()；only-child；only-of-type；empty

最新推荐文章于 2024-03-14 20:11:27 发布

peakJun

最新推荐文章于 2024-03-14 20:11:27 发布

阅读量146

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/JunGuanDreams/article/details/130371122

版权

1,解释

（1）：nth-last-child(n)所有兄弟元素的倒数第n个

（2）：nth-last-of-type(n)所有同类型兄弟元素中的倒数第n个

（3）：only-child选择没有兄弟的元素（独生子女）

（4）：only-of-typ选择没有同类型兄弟的元素

（5）：empty内容为空元素（空格也算内容）

2，代码演示

<style>
    /* 选中div中倒数第n个的儿子p元素(按照所有兄弟) */
    div>p:nth-last-child(3){
      color: red;
    }
    /* 选中div中倒数第n个的儿子p元素(按照所有同类型兄弟) */
    div>p:nth-last-of-type(1){
      color: green;
    }

    /* 选中的是没有兄弟的span元素-看结构2 */
    span:only-child{
      color: red;
    }
    /* 选中的是没有同类型兄弟的span元素-看结构2 */
    span:only-of-type{
      color: red;
    }

    /* 选中的是没有内容的div元素 */
    div:empty{
      width: 200px;
      height: 180px;
      background-color: red;
    }
  </style>
</head>
<body>
   <!-- 结构1 -->
   <div>
    <span>测试1</span>
    <p>张三：98分</p>
    <p>李四：88分</p>
    <p>王五：78分</p>
    <p>赵六：68分</p>
    <p>孙七：58</p>
    <p>老八：48</p>
    <span>测试2</span>
  </div>

  <!-- 结构2 -->
  <div>
    <span>测试1</span>
  </div>
  <div>
    <span>测试2</span>
    <p>张三：98分</p>
    <p>李四：88分</p>
    <p>王五：78分</p>
    <p>赵六：68分</p>
    <p>孙七：58</p>
    <p>老八：48</p>
  </div>

  <!-- 结构3 -->
  <div></div>
</body>

peakJun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
结构伪类选择器：nth-last-child()；nth-last-of-type()；only-child；only-of-type；empty

（2）：nth-last-of-type(n)所有同类型兄弟元素中的倒数第n个。（1）：nth-last-child(n)所有兄弟元素的倒数第n个。（3）：only-child选择没有兄弟的元素（独生子女）（4）：only-of-typ选择没有同类型兄弟的元素。（5）：empty内容为空元素（空格也算内容）
复制链接

扫一扫