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

最新推荐文章于 2024-03-14 20:11:27 发布
最新推荐文章于 2024-03-14 20:11:27 发布
阅读量1k 收藏
点赞数
分类专栏： HTML css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengqingIT/article/details/88910832
版权
HTML 同时被 2 个专栏收录
41 篇文章 0 订阅
订阅专栏
css
41 篇文章 0 订阅
订阅专栏

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;
}
り゛宿҈命҈ゞ �
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS：好玩的‘伪类’系列之——(:nth-last-child与:nth-last-of-type)
gavincz的博客
04-30 908
之前写系列时漏掉了，这个很简单，容易理解，话不多说，直接看吧 :nth-last-child 定义：匹配当前元素及与之相同的所有兄弟元素（从后往前），修改其样式。它基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处。 触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇...
css3倒数两个,:nth-last-child()
weixin_39778003的博客
08-03 4812
:nth-last-child()版本：CSS3:nth-last-child()，这个CSS 伪类，从兄弟节点中从后往前匹配，处于某些位置的元素。注意:这个伪类和语法:E:nth-last-child(n){sRules}匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是，即E可以是的子元素该选择符允许使用一个乘法因子...
:nth-last-child() | CSS属性参考
初晴
09-19 2548
CSS :nth-last-child()伪类选择器基于索引来匹配父元素中的子元素，从最后一个子元素开始计数。 :nth-last-child()伪类选择器的参数在W3C官方表示为an+b。an+b为一个公式. a,b为常量, n的取值是从0开始的整数。 如果将参数进行拆分，可以分为以下几种情况： 1、提供一个正数作为参数。 你可以为:nth-last-child()提供一
css选择器nth-last-child(n)的学习理解
最新发布
qwguo
03-14 726
此选择器和nth-child(n)类似都是选择其父元素的第 n 个子元素，唯一的区别在于它是从父元素的子元素末尾开始往前数，一直到第一个子元素。
CSS3技巧--巧妙运用first-child和nth-last-child实现元素个数选择器
DoubleBird的博客
08-28 2107
有时候可能我们会有这样一种需求 当div内有1个元素时应用某种样式，当div内有2个元素时又利用不同的样式。。。。以此类推。 但是CSS中除了only-child可以选择只有一个元素的情况，那么别的情况怎么办？ /* 一个元素时 */ li:first-child:nth-last-child(1) { /* -或者可以使用- li:only-child { */ width: ...
jquery nth-child()选择器的简单应用
01-21
通过网上咨询使用这个选择器便很容易的解决。特此记录一下。 下面是主要的代码 js脚本： 代码如下: [removed] $(document).ready( function () { //每隔五行给li加一个样式 $(‘.article_li li:nth-child(5n)’)....
css3的focus-within选择器的使用
11-20
伪元素和伪类 说到这个，我们先回顾...:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not() 伪类一般用于一个元素的某个状态，比如说鼠标悬浮，按钮点击，
nth-grid:Nth Grid是功能强大的网格系统，可让您创建语义的水平或垂直网格布局
05-07
我们使用:nth-child选择器的功能来创建美观的语义网格，而无需任何常见的布局技巧。 特征 Flexbox供电 语义标记 水平和垂直布局 流体单元支持（类似于在CSS网格中使用fr单元） 混合单位网格（例如同一网格中的像素...
结构伪类选择器（总结）
12-22
什么是结构伪类选择器？ 结构伪类选择器是针对HTML的结构进行分类的选择器，特征就是位置 分为三大类 ...作用：两个css选择器通过波浪线连接起来，但只作用于后一个css选择器，并且必须出现前一个选择器才符
CSS3 新增选择器的实例
01-19
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式​ li:first-child { /* 选择第一个孩子 */ color: pink;
CSS条件选择器:has()和:nth-last-child()
linanran1027的博客
05-19 344
列表有时候需要根据个数显示不同的样式，这时候，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 1567
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下倒数第二个子
nth-last-child() 选择器
MJOY791270505的博客
07-21 612
使用after设置分割线，最后一行不显示分割线。
html选择倒数第二个元素,css3伪类nth-last-child() 选择器语法
weixin_31972679的博客
06-04 4882
CSS3 :nth-last-child() 选择器先来看看一个实例：规定属于其父元素的 倒数 第二个子元素的每个 p 元素p:nth-last-child(2){background:#ff0000;}这是标题第一个段落。第二个段落。所有主流浏览器均支持 :nth-last-child() 选择器，除了 IE8 及更早的版本。定义和用法nth-last-child(n) 选择器匹配属于其元素的 ...
nth-last-child()和nth-last-of-type() 的区别、以及选择则倒数几个元素
wangjinyu124419的博客
04-08 4915
工作中老用到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 ...
CSS：nth-child、first-child、last-child
梦之归途的博客
02-13 2936
CSS：nth-child、first-child、last-child
css 中 nth-child、first-child、last-child 的使用（选中第一个，第几个，第几个到第几个，最后一个等）
热门推荐
KLW75
08-11 1万+
可以配合 li 标签使用，选择一列中的哪些标签。 1.first-child选择列表中的第一个标签 2.last-child 选择列表中的最后一个标签 li:first-child{color:red} li:last-child{color:pink} 3.nth-child(n) 这里的n为数字，表示选择列表中的第n个标签 例如选择第三个标签 li:nth-child(3){color:pink} 4.nth-child(2n) 选择列表中的偶数，选中2、4、6……...
nth-child（n）、first-child、last-child用法
aiyumo1993的博客
02-26 1万+
注：nth-child(n)选择器匹配父元素中的第n个子元素。 n可以是一个数字，一个关键字，或者一个公式。 nth-child（n）用法： 1、nth-child(3) 表示选择列表中的第3个标签，代码如下： li:nth-child(3){background:#fff} 1 2、nth-child(2n) 表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签，代码如下： li:nt...
css :nth-child()
09-07
:nth-child() 是 CSS 选择器中的一个伪类，用于选取父元素下的特定位置的子元素。 :nth-child(n) 选择器会选取每个父元素下的第 n 个子元素。其中 n 可以是一个具体的数字、关键字（如 even 或 odd），或者一个公式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值