javascript - CSS如何取最后一个class为a的元素？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - CSS如何取最后一个class为a的元素？

迷茫 2017-04-10 18:05:29

[JavaScript讨论组]

875

一般取最后一个元素使用:last-child，如果是取最后一个class为a的元素该怎么办？能使用css完成吗？

.primary-tag:first-child {
    color:red;
}

.primary-tag:last-child {
    color:blue;
}

好尴尬，:first有用，:last没用

<li class="primary-tag"><i class="iconfont color1">&#xe67f;</i>创意设计<i class="iconfont icon-xiala"></i></li>
<li class="primary-tag"><i class="iconfont color2">&#xe67f;</i>技术开发<i class="iconfont icon-xiala"></i></li>
<li class="primary-tag"><i class="iconfont color3">&#xe67f;</i>极客数码<i class="iconfont icon-xiala"></i></li>
<li class="primary-tag"><i class="iconfont color4">&#xe67f;</i>文艺生活<i class="iconfont icon-xiala"></i></li>
<li class="primary-tag"><i class="iconfont color5">&#xe67f;</i>资源下载<i class="iconfont icon-xiala"></i></li>

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(7)

天蓬老师2017-04-10 18:07:29 7楼

:first-child 是匹配父元素的第一个子元素，:last-child 是匹配父元素的最后一个子元素（这里要求这个子元素必须是父元素里的最后一个子元素），如果是最后一个class为a的元素，我觉得可能用 .a:nth-last-of-type(1) 更合适一点吧。

赞 +0

添加回复

迷茫2017-04-10 18:07:29 6楼

题主的要求是“取最后一个 class 为 a 的元素”，而li.a:last-child这个选择器的意思是“取 class 为 a 的，且该元素是其父元素中最后一个子元素的那个元素”，两者是有区别的。
也就是说：如果最后一个子元素有 a 这个类，选择器生效，而如果没有 a 类，选择器失效。

例如：

<ul>
    <li>content</li>
    <li class="a">content</li>
</ul>

这种情况选择器li.a:last-child生效，而：

<ul>
    <li class="a">content</li>
    <li>content</li>
</ul>

这种情况选择器失效，不会选中任何元素。

因此题主的需求“取最后一个 class 为 a 的元素”，仅通过 CSS 是无法实现的。

赞 +0

添加回复

PHP中文网2017-04-10 18:07:29 5楼

$('.a') 取出所有class为a的标签,再取出的数组里面取最后一个

赞 +0

添加回复

迷茫2017-04-10 18:07:29 4楼

$('.a:last-child')

赞 +0

添加回复

巴扎黑2017-04-10 18:07:29 3楼

没太懂，不一样可以用last-child吗？

<style>
  .a:last-child {
    color: blue;
  }
</style>
<body>
    <p>123456</p>
    <p>123456</p>
    <p>123456</p>
    <p class="a">123456</p>
    <p>123456</p>
    <p class="a">123456</p>
</body>

赞 +0

添加回复

PHP中文网2017-04-10 18:07:29 2楼

选择器是没有问题的，你是有其他的东西干扰了

https://jsfiddle.net/gfje2tay/1/

赞 +0

添加回复

高洛峰2017-04-10 18:07:29 1楼

没问题啊,要加上边框样式，才能看到结果
CSS修改为:

.primary-tag {
    border-left:1px solid red;
    border-right:1px solid red;
    border-top:1px solid red;
}

.primary-tag:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.primary-tag:last-child {
    border-bottom:1px solid red;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

HTML:

<ul>
    <li class="primary-tag">
        <i class="iconfont color1">&#xe67f;</i>创意设计
        <i class="iconfont icon-xiala">

        </i>
    </li>
    <li class="primary-tag">
        <i class="iconfont color2">&#xe67f;</i>技术开发
        <i class="iconfont icon-xiala"></i>
    </li>
    <li class="primary-tag">
        <i class="iconfont color3">&#xe67f;</i>极客数码
        <i class="iconfont icon-xiala"></i>
    </li>
    <li class="primary-tag">
        <i class="iconfont color4">&#xe67f;</i>文艺生活
        <i class="iconfont icon-xiala"></i>
    </li>
    <li class="primary-tag">
        <i class="iconfont color5">&#xe67f;</i>资源下载
        <i class="iconfont icon-xiala"></i>
    </li>

</ul>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>