www.yzc261.comCSS如何取最后一个class为a的元素?

( www.yzc261.com )

一般取最后一个元素使用: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>


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

题主的要求是“取最后一个 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 是无法实现的。

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

$.a:last-child

没太懂,不一样可以用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>

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

https://jsfiddle.net/gfje2tay/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>

(看完/读完)这篇文章有何感想! www.yzc261.com的分享…

发表评论

电子邮件地址不会被公开。 必填项已用*标注