问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css的伪元素和last-child

头像
muzi1102
    51686078
    <!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 就行

    cssjavascripthtml
    阅读 4.7k
    5 个回答
    得票最新
    头像
    ws7she
      2
      新手上路，请多包涵

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

      头像
      Letme
        17724184

        没有效果是因为没有找到对应的li,last-child和first-child这2个用法比较容易混淆

        头像
        某熊猫桑
          16.1k61547

          .track-s:last-child::after是这个意思“.track-s作为其父元素的最后一个子元素、它的伪元素...”，而既然.track-s并不是最后一个子元素，那这条规则是无法命中的。

          头像
          liujians
            2.6k1326

            如果选择的是最后一个li才会生效

            我把题主的代码改了一下，看一下应该知道为什么了

            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 有效果 */
       .track-s:last-child::after{
            content:"bbx";
            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-e">4</li>
        <li class="track track-e">5</li>
        <li class="track track-s">3</li>
    </ul>
</body>
</html>

            可以考虑用多元素去方便选择器的选择

            <!-- test4.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 有效果 */
       .track-s:nth-last-of-type(1)::after{
            content:"bb";
            color: red;
       } 
       /* 有效果 */
       .track-e:last-of-type::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>
        <div class="track track-e">4</div>
        <div class="track track-e">5</div>
    </ul>
</body>
</html>
            头像
            七橘子
              63831730

              使用last-of-type，可以取到最后一个.track-s
              .track-s:last-of-type::after
              last-of-type 和 last-child是有区别的，last-of-type指的是其父元素的特定类型的最后一个子元素的每个元素，last-child指的是其父元素最后一个子元素的每个元素（所有的子集都包括了）

              推荐问题