Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    /* 没有效果 */
       .track-s:last-child::after{
            content:"aa";
            color: red;
       } 
       /* 有效果 */
       .track-e:last-child::after{
            content:"aa";
            color: red;
       } 
    </style>
</head>
<body>
    <ul>
        <li class="track track-s">1</li>
        <li class="track track-s">2</li>
        <li class="track track-s">3</li>
        <li class="track track-e">4</li>
        <li class="track track-e">5</li>
    </ul>
</body>
</html>

为什么这种写法( .track-s:last-child::after)没效果,但是 .track-e:last-child::after 就行


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
283 views
Welcome To Ask or Share your Answers For Others

1 Answer

css3中的伪类选择器 first 和last 指的都是 指定属于其父元素的最后一个子元素;
.track-s:last-child::after时 指的是.track-s的父亲 ul 的最后一个子元素。而不是当前这个类的最后一个元素。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...