CSS：last-child选择器和nth-last-child(n)选择器为什么不执行

img

img


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>first-child和last-child选择器的使用</title>
        <style type="text/css">
            p:first-child{
            color:pink;
            font-size:16px;
            font-family:"宋体";    
            }
            p:last-child{
            color:blue;
            font-size: 16px;
            font-family: "微软雅黑";
            }
            /*:first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式*/
        </style>
    </head>
    <body>
        <p>第一篇 毕业了</p>
        <p>第二篇 关于考试</p>
        <p>第三篇 夏日飞舞</p>
        <p>第四篇 惆怅的心</p>
        <p>第五篇 畅谈美丽</p>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>nth-child(n)和nth-last-child(n)选择器的使用</title>
        <style type="text/css">
            p:nth-child(2){
                color:pink;
                font-size:16px;
                font-family:"宋体";
            }
            p:nth-last-child(2){
                color:blue;
                font-size:16px;
                font-family:"微软雅黑";
            }
        </style>
    </head>
    <body>
        <p>第一篇 毕业了</p>
        <p>第二篇 关于考试</p>
        <p>第三篇 夏日飞舞</p>
        <p>第四篇 惆怅的心</p>
        <p>第五篇 畅谈美丽</p>
    </body>
</html>

为什么last-child和nth-last-child没有效果

一开始我还不信，结果试了一下真的这样。找了一下原因，发现了这个观点：css匹配规则要满足区间闭合。我试着套一层div就能识别了，但是看别人能识别，估计跟开发工具有关吧(我是用hbuilder x)，编译方式不同。

img

img

你的code我复制可以生效哦，确保页面刷新了并且使用兼容性好的浏览器https://caniuse.com/