(CSS):last-child不起作用的原因

最新推荐文章于 2024-04-07 21:14:44 发布

banfen1940

最新推荐文章于 2024-04-07 21:14:44 发布

阅读量1.9k

点赞数

文章标签： javascript 开发工具 ViewUI

原文链接：http://www.cnblogs.com/whbniit/p/8996970.html

版权

今天写了个CSS的测试样例，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪类选择器</title>
    <style type="text/css">
        .div-01:last-child{
            color: red;
        }
    </style>
</head>
<body>
    <div class="div-01">
        <p class="p-01">
            同
        </p>
    </div>

    <div class="div-01">
        <p class="p-01">
            志
        </p>
    </div>

    <div class="div-01">
        <p class="p-01">
            们
        </p>
    </div>
    <p>
        辛
    </p>

    <p>
        苦
    </p>
</body>
</html>

原本觉着，选择器会选中

    <div class="div-01">
        <p class="p-01">
            们
        </p>
    </div>

可结果出乎我的意料，我们重新理解一下last-child选择器，在CSS标准中的含义

:last-child    p:last-child    选择属于其父元素最后一个子元素每个 <p> 元素。

选择其父元素最后一个子元素，每个<p>元素，根据这段话我们能否发现：div-01对应父元素是body，而body最后一个子元素是

    <p>
        苦
    </p>

而我的选择器是：

.div-01:last-child

p对应的类与选择器不匹配，自然就选择不上了。

转载于:https://www.cnblogs.com/whbniit/p/8996970.html

banfen1940

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(CSS):last-child不起作用的原因

今天写了个CSS的测试样例，代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>伪类选择器</title> <style type="text/css"> .div-0...
复制链接

扫一扫