CSS :nth-last-child() 选择器

最新推荐文章于 2024-10-26 14:43:59 发布

原创最新推荐文章于 2024-10-26 14:43:59 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

HTML 同时被 2 个专栏收录

41 篇文章

订阅专栏

css

41 篇文章

订阅专栏

本文介绍了一种CSS选择器 :nth-last-child(2)，该选择器用于选取同类型元素中的倒数第2个同级兄弟元素，并通过一个实例展示了如何设置这些元素的背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 用法

<body>

<h3>:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素</h3>
<p>实例：指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色</p>
<p>半暖茶港</p>
<p>www.semi-warm.com</p>
<p>半暖茶港</p>

</body>

CSS 用法

p:nth-last-child(2)
{
	background:#ff0000;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

り゛宿҈命҈ゞ �

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

利用CSS nth-child选择器实现高级列表样式

weixin_41455464的博客

06-29

234

没错，这就是列表的基本功能。咱们来聊聊CSS里一个神奇的小家伙，它就像一根魔法棒，能让你的列表瞬间变得生动活泼，不再是清一色的“排排坐，吃果果”。是一个非常强大且灵活的 CSS 选择器，它可以让我们轻松地实现各种复杂的列表样式。这就意味着，我们可以选择特定的子元素，也可以选择满足某种规律的子元素。记住，前端的世界是充满乐趣的，只要你敢于尝试，敢于创新，就能创造出无限可能！效果：列表中只有第三个列表项的文字会变成红色，其他的依然保持默认颜色。效果：列表中的前三个列表项的文字会变成蓝色并加粗，更加醒目。

CSS：好玩的‘伪类’系列之——(:nth-last-child与:nth-last-of-type)

gavincz的博客

04-30

1021

之前写系列时漏掉了，这个很简单，容易理解，话不多说，直接看吧 :nth-last-child 定义：匹配当前元素及与之相同的所有兄弟元素（从后往前），修改其样式。它基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处。触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇...

参与评论您还未登录，请先登录后发表或查看评论

CSS的:nth-last-child()伪类：逆序子元素选择的艺术

2401_85743969的博客

08-18

1358

伪类选择器是CSS中用来选择元素的特定状态或属性的关键字。例如，:hover伪类用于选择鼠标悬停时的元素。伪类则用于从父元素的末尾开始选择子元素。

:nth-last-child() | CSS属性参考

初晴

09-19

2717

CSS :nth-last-child()伪类选择器基于索引来匹配父元素中的子元素，从最后一个子元素开始计数。 :nth-last-child()伪类选择器的参数在W3C官方表示为an+b。an+b为一个公式. a,b为常量, n的取值是从0开始的整数。如果将参数进行拆分，可以分为以下几种情况： 1、提供一个正数作为参数。你可以为:nth-last-child()提供一

css3倒数两个,:nth-last-child()

weixin_39778003的博客

08-03

5290

:nth-last-child()版本：CSS3:nth-last-child()，这个CSS 伪类，从兄弟节点中从后往前匹配，处于某些位置的元素。注意:这个伪类和语法:E:nth-last-child(n){sRules}匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是，即E可以是的子元素该选择符允许使用一个乘法因子...

css选择器nth-last-child(n)的学习理解

qwguo

03-14

1273

此选择器和nth-child(n)类似都是选择其父元素的第 n 个子元素，唯一的区别在于它是从父元素的子元素末尾开始往前数，一直到第一个子元素。

CSS选择器：第一个、最后一个、单双、奇偶、第n个、反选，nth-child，last-child，first-child

weixin_44303625的博客

10-26

5323

选择器用法: 选择属于其父元素的最后一个子元素。示例结合这些选择器，你可以灵活地为网页中的元素添加样式。确保在HTML结构中使用这些选择器时，理解它们的行为，以便达到预期效果。

IE8下CSS3选择器nth-child() 不兼容问题的解决方法

11-21

此外，虽然不适用于IE8，但这里也提及了一些其他CSS3选择器，如`nth-of-type()`、`:first-of-type`、`:last-of-type`、`:only-of-type`、`:nth-last-child()`和`:nth-last-of-type()`。这些选择器允许更精确地定位...

使用css属性:nth-child(n)匹配选择第n个子元素

09-25

在CSS（层叠样式表）中，`:nth-child(n)`是一个强大的选择器，它允许我们精确地选择和操作页面上的特定子元素。这个选择器基于元素在父元素中的相对位置来匹配元素，而不是基于它们的名称、类或者ID。这意味着无论...

:nth-child`、`:nth-last-child`、是什么选择器

最新发布

07-31

首先，用户的问题是关于CSS伪类选择器 `:nth-child` 和 `:nth-last-child` 的含义和用法。我需要根据系统指令来构建回答。系统指令的关键点： - 所有行内数学表达式必须用 `$...$` 格式。但在这个上下文中，CSS...

CSS3技巧--巧妙运用first-child和nth-last-child实现元素个数选择器

DoubleBird的博客

08-28

2201

有时候可能我们会有这样一种需求当div内有1个元素时应用某种样式，当div内有2个元素时又利用不同的样式。。。。以此类推。但是CSS中除了only-child可以选择只有一个元素的情况，那么别的情况怎么办？ /* 一个元素时 */ li:first-child:nth-last-child(1) { /* -或者可以使用- li:only-child { */ width: ...

nth-last-child() 选择器

MJOY791270505的博客

07-21

727

使用after设置分割线，最后一行不显示分割线。

CSS条件选择器:has()和:nth-last-child()

linanran1027的博客

05-19

566

列表有时候需要根据个数显示不同的样式，这时候，CSS条件选择器能帮上大忙！主要利用CSS伪类:has()和。

css中nth-last-of-type()和nth-last-child()、last-of-type和 last-child 以及nth-child()、nth-of-type()的区别

weixin_43373383的博客

02-24

1757

css中nth-last-of-type()和nth-last-child()、last-of-type和 last-child 以及nth-child()、nth-of-type()的区别 nth-last-of-type() <!DOCTYPE html> <html> <head> <title>css3</title> <style type="text/css"> /* div下倒数第二个子

CSS之nth-child用法

DavidZhao的博客

01-31

1211

当我想要完美的使用：nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们，就能写出越好的CSS规则！在这些简单的”秘方”（实际上是表达式）中我将重复的使用一个简单的列表并随即选择数字。但是很明显很容易改变它们以获得类似的选择器。只选择第五个元素 li:nth-child(5){ color: green; } 要选择第一个元素，你可以使用:first...

html选择倒数第二个元素,css3伪类nth-last-child() 选择器语法

weixin_31972679的博客

06-04

5144

CSS3 :nth-last-child() 选择器先来看看一个实例：规定属于其父元素的倒数第二个子元素的每个 p 元素p:nth-last-child(2){background:#ff0000;}这是标题第一个段落。第二个段落。所有主流浏览器均支持 :nth-last-child() 选择器，除了 IE8 及更早的版本。定义和用法nth-last-child(n) 选择器匹配属于其元素的 ...

【CSS】:nth-child()选择器的用法

y_coder的博客

05-22

3757

::nth-child 还支持使用公式来选择元素，例如 2n+1 表示选择奇数位置的元素，3n 表示选择位置是 3 的倍数的元素等等。这使得 &::nth-child 在选择灵活位置上的元素时非常有用。使用 &::nth-child 可以根据元素在其父级元素中的位置应用样式。例如，你可以使用它来选择列表中的奇数或偶数行，或者选择特定位置上的元素。这意味着第一个元素的位置是 1，第二个元素的位置是 2，以此类推。，其中 n 是一个表示位置的参数。

css 选择器：选择倒数第几个元素

PrimaryColor

05-14

3258

选择倒数第二个元素： p:nth-last-child(2) { background:#ff0000; }

nth-last-child()和nth-last-of-type() 的区别、以及选择则倒数几个元素

wangjinyu124419的博客

04-08

5316

工作中老用到css选择器对nth-last-child()和nth-last-of-type()用法不是熟练，今天整理下。最开始看的w3c的中文文档，看的有点蒙，后来发现可能是翻译问题。。。直接上例子吧。 1、nth-last-child() The:nth-last-child(n)selector matches every element that is thenth ...