如何使用 css nth-child 选择列表中的最后 2 项?

2023-12-21

是否可以?如果没有,有没有办法用 jQuery 来做到这一点?


CSS3 可以做到这一点。考虑标记:

<ul>
    <li><a href="">First item</a></li>
    <li>Second item</li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Pre-last item</a></li>
    <li><a href="">Last item</a></li>
</ul>

要选择最后两个 LI 元素,请执行以下操作:

ul > li:nth-last-of-type(-n+2) {
    background: green;
}

适用于所有当代浏览器,包括 IE9,但不包括 IE8 及更低版本。要添加对这些浏览器的支持,您可以考虑使用Selectivizr.js http://selectivizr.com/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 css nth-child 选择列表中的最后 2 项? 的相关文章

  • CSS 效果渲染具有“橡皮图章”效果的字体

    CSS中有没有有效的方法来渲染字体 使其看起来像橡皮图章 好像橡皮印章上的墨水覆盖在印刷材料上 更好的是将相同的效果应用于边框 就好像边框是橡皮图章的一部分一样 像这样 这与您正在寻找的内容很接近 它使用了覆盖伪元素以及mix blend
  • 为民意调查结果创建彩色条

    在我的网络应用程序中 我想用彩色条显示民意调查结果 其长度与选票百分比成正比 如何使用 HTML CSS 实现此目的 该网站包含一些很好的示例 http apples to oranges com blog post css for bar
  • 使用 jQuery 禁用 CSS 继承

    有没有办法使用 jQuery 或通用 javascript 在块级别禁用 CSS 继承 例如 如果我通过 javascript 拉入外部资源 例如 Pastie org 它们将拥有自己的 CSS 而我的 CSS 会覆盖它们 我想将嵌入代码放
  • 如何在CSS中水平对齐div

    我在一个容器内有三个子 div 我想水平对齐这些 div 我尝试使用CSSfloat财产 但圆圈正在变成椭圆形 标记代码 div class container info box clearfix div class circle div
  • 如何替换 CSS 表达式

    我有一个用于时间表条目的旧 ASP Web 应用程序 其中充满了 CSS 表达式 它们出现在 CSS 文件中 ApptPage position relative height expression Math max document bo
  • html/js 中从右到左和/或从上到下的文本?

    如何在浏览器中为用户输入创建从右到左和从上到下的文本字段 有没有本地方法可以做到这一点 或者也许有解决方法 从上到下可能像日语或象形文字 对于 RTL 文本字段 您可以使用 HTMLdir属性 如 ime Vidas 已经提到的 或 wit
  • JQuery mouseover 函数多次触发

    我很长时间以来一直使用这种方法来为整个类 按钮等 设置事件 div bigButton mouseover function this style backgroundColor dfdfdf 然而 在进行一些测试时 我刚刚注意到 当将鼠标
  • 单击即可切换背景颜色和过渡

    这看起来应该很容易 但我真的找不到办法做到这一点 动画 http doir ir css gif http doir ir css gif 当您单击这些相应的链接时 我需要更改和过渡页面的背景颜色 我见过的最接近触发这种类型转换的事情是 仅
  • html2canvas z-index 不起作用

    我正在使用 html2canvas 库将 div 转换为 png 我有一个关于z index 正如你在图片上看到的 我有盒子 在一个盒子里我有一个用于背景着色的 div z index 0 它随着高度值和数字的 div z index 1
  • 样式表与 标记上的 TITLE 属性中断? [复制]

    这个问题在这里已经有答案了 我正在帮助升级一个非常旧的公司内部网 我们的用户使用的是 IE8 和 IE9 我们的大多数网站都是为 IE5 IE9 编写的 我们即将将所有人升级到 IE11 但试点人员发现了大量兼容性问题 未来几个月将会有大量
  • 如何删除链接点击时的轮廓?

    当我单击网站上的链接时 它会在链接周围创建一个轮廓 如下所示 我尝试添加 a image link focus outline 0 and a outline none 但似乎没有什么可以摆脱它 有办法去除吗 你可以使用这个 a activ
  • HTML5 输入类型范围,带有最小值滑块、最大值滑块和刻度

    我必须实现 HTML5 输入类型 Range
  • 如何获取当前页面样式表作为字符串?

    假设我当前的页面如下所示 我想
  • HTML 电子邮件中的边距有什么替代方案?

    Hotmail 不支持 HTML 电子邮件中的边距 还有其他选择吗 我建议使用表格并调整列的宽度 HTML 电子邮件有时搭配表格效果更好 此外 您还可以查看收件箱中的一封电子邮件 该电子邮件可以执行您想要的操作并检查源代码 由于这个答案似乎
  • 如何获取div背景图像上的锚标记?

    HTML div a href http www facebook com au a div css facey float left width 32px height 32px background url file C Users U
  • css中的减号或下划线有什么作用吗?

    这个问题和我问的很相似here https stackoverflow com questions 6110816 period in css does it do anything 我正在清理一些文件 我在这个 css 中遇到了这个 so
  • 将 WooCommerce 属性标签替换为每个的自定义图像

    我正在做一个项目 我需要一些团体的帮助 我正在使用 woocommerce 产品系统 在商店存档页面产品上我显示属性标签 属性值 就像文本一样 属性标签 属性值 例如传输 手动 有没有办法将属性标签显示为图像 我无法添加 html 代码 i
  • Chrome 开发工具准确计算 CSS 规则值

    无论如何 例如我可以获取要在 Chrome 开发工具中显示的字体的确切像素值 带小数位 吗 In Firebug 如下 当我定义 value 它显示精确的计算值 以像素为单位 最多 4 位小数 In Chrome 开发工具 如下 它仅显示整
  • 如何在JavaFX中获得狭窄的进度条?

    正如标题所说 我需要制作一个细进度条 我用过这个 progressBar setMaxHeight 0 1 progressBar setPrefHeight 0 1 但这行不通 有人有想法吗 你必须搞乱样式才能让它变小 我真的建议看看ca
  • 如何使相对div居中?

    我一直在尝试让以下代码工作几个小时 但没有成功 您能帮我将项目 div 居中吗 即使页面放大和缩小时 这是我的 HTML 和 CSS bottom position absolute top 100 left 0 right 0 backg

随机推荐