css中nth-last-of-type()和nth-last-child()、last-of-type和 last-child 以及nth-child()、nth-of-type()的区别

最新推荐文章于 2024-04-30 15:11:52 发布

撒旦的不归上帝

最新推荐文章于 2024-04-30 15:11:52 发布

阅读量1.5k

点赞数

分类专栏：基础知识文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_43373383/article/details/123117668

版权

基础知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css中nth-last-of-type()和nth-last-child()、last-of-type和 last-child 以及nth-child()、nth-of-type()的区别

nth-last-of-type()

<!DOCTYPE html>
<html>
<head>
    <title>css3</title>
    <style type="text/css">
        /* div下倒数第二个子元素且是p元素 */
        p:nth-last-child(2){
            background-color: red;
        }
        /* div下倒数第二个p元素 */
        p:nth-last-of-type(2){
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <span>5</span>
    </div>
</body>
</html>

先明白这两个的区别：就是child和type的区别
其余的就明白了

- type?:nth-child(index) 正序第index个子元素且有type就必须是type元素
- type?:nth-last-child(index) 倒序第index个子元素且有type就必须是type元素
- type?:firs-child 第一个子元素且有type就必须是type元素
- type?:last-child 最后一个子元素且有type就必须是type元素
-
- type:nth-of-type(index)  第index个type子元素
- type:nth-last-of-type(index) 倒序第index个type子元素
- type:first-of-type 第一个type子元素
- type:last-of-type 倒数第一个type子元素

撒旦的不归上帝

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css中nth-last-of-type()和nth-last-child()、last-of-type和 last-child 以及nth-child()、nth-of-type()的区别

css中nth-last-of-type()和nth-last-child()、last-of-type和 last-child 以及nth-child()、nth-of-type()的区别nth-last-of-type()<!DOCTYPE html><html><head> <title>css3</title> <style type="text/css"> /* div下倒数第二个子
复制链接

扫一扫