:nth-last-of-child()与:nth-last-of-type()

最新推荐文章于 2022-11-02 23:34:40 发布
最新推荐文章于 2022-11-02 23:34:40 发布
阅读量252 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdhxs/article/details/108462791
版权

nth-child(n)

ele:nth-child(n)选中ele元素，且ele是某个元素下的第n个元素
p:nth-child(n) ---->选中p元素，且该p元素必须是某个父元素下的第n个子元素
这里的n是从1开始的

li:nth-child(n+6)：选中从第6个开始的子元素（即n从0开始）

:nth-child(-n+9)：选中从第1个到第9个子元素

nth-last-child(3)：选中倒数第三个

nth-of-type

ele:nth-of-type选中的是某个元素下的第几个ele类型的元素。

https://blog.csdn.net/lonecry/article/details/87864416

Mr.Groooooooot
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
伪类 nth-child() 和 nth-of-type()
哈哩噜啾啾哈呀呀的博客
04-04 154
:nth-child(n)选择器 匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 这个选择器是先找前面元素的父元素，然后再找父元素下的第N个子元素，如果这个子元素和伪类前的选择器匹配，则添加相应样式，否则忽略。 <!DOCTYPE html> <html> <head> <style> p:nth-chil...
css 伪类选择器
weixin_43294560的博客
11-17 1829
css 伪类选择器。
nth-last-child()和nth-last-of-type() 的区别、以及选择则倒数几个元素
wangjinyu124419的博客
04-08 4941
工作中老用到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-last-of-type()和nth-last-child()、last-of-type和 last-child 以及nth-child()、nth-of-type()的区别
weixin_43373383的博客
02-24 1587
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下倒数第二个子
CSS3中nth-of-type和nth-last-of-type
weixin_33753845的博客
09-03 150
1.使用nth-child和nth-last-child时会产生的问题 在使用nth-child和nth-last-child时，其计算子元素是奇数个元素还是第偶数个元素时，是连同父元素中的所有子元素一起计算的。 当父元素是列表时，列表中只可能有列表项目一种子元素，所以不会出问题，但是当父元素是div时，div包含多种子元素，会出现问题。 2.使用nth-of-type和nth-last-o...
css笔记02：选择器（标签式和类）
weixin_30858241的博客
06-29 123
body { margin:0; padding:0; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: 12px sans-serif; } 这里body就是选择器，这里将margin、padding、background及font等CSS属性应用到到...
jQuery中:last-child选择器用法实例
10-24
在jQuery中，`:last-child`选择器是一种非常实用的...通过熟练掌握`:last-child`以及其他类似的选择器，如`:first-child`、`:nth-child(n)`等，你可以编写出更加优雅和高效的jQuery代码，提高网页的交互性和用户体验。
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
09-24
- `:last-of-type`：选择父元素中最后一个特定类型的子元素，等同于`nth-last-of-type(1)`。 - `:only-of-type`：选择父元素中唯一一个特定类型的子元素。 - `:nth-last-child(n)`：从后向前数，选择父元素的第N个子...
jquery nth-child()选择器的简单应用
01-21
下面是主要的代码 js脚本： 代码如下: [removed] $(document).ready( function () { //每隔五行给li加一个样式 $(‘.article_li li:nth-child(5n)’).addClass(‘liborder’); $(‘.article_li li:last’).addClass...
nth-grid:Nth Grid是功能强大的网格系统，可让您创建语义的水平或垂直网格布局
05-07
我们使用:nth-child选择器的功能来创建美观的语义网格，而无需任何常见的布局技巧。 特征 Flexbox供电 语义标记 水平和垂直布局 流体单元支持（类似于在CSS网格中使用fr单元） 混合单位网格（例如同一网格中的像素...
jQuery+css last-child实现选择最后一个子元素操作示例
10-17
本示例将详细介绍如何利用jQuery结合CSS的`:last-child`伪类选择器来选取并操作页面上的最后一个子元素。`:last-child`伪类在CSS中用于选取其父元素的所有子元素中的最后一个子元素。 首先，让我们理解一下标题和...
CSS伪类选择器详细讲解
热门推荐
weixin_67979623的博客
11-02 1万+
说起CSS3选择器种类之多，今天我们来学习下CSS3中重中之重的选择器伪类选择器，这篇涵盖了很多知识点，你看完这篇保证能对它有个更深的了解
CSS3最常用选择器总结笔记
做技术，坚持才是最重要的，一时的热情只是暂时的进步
10-27 280
一、基础选择器       1.1 继承 *(0000) css2       1.2 元素选择器(0001) css1       1.3 类选择器(0010) css1       1.4 ID选择器(0100) css1    &nbs
伪类结构选择器，状态伪类选择器，弹性盒子
Dimples___的博客
09-14 83
first-of-child:特定的第一个子级（第一个li类型的标签，li不用是第一个子元素）align-items:交叉轴对齐方式：flex-start 起点对齐。调整换行的排列方式：alidn-content:flex-start。first-child: 第一个子级（只能是第一个li，li是第一个子级元素）nth-last-of-type(n):（指定类型的倒数第n个子元素）4.::first-letter:文本的首字母，只用于块元素。nth-of-type(n):特定的第n个子元素（比较准确）
nth-of-type和nth-child的正确使用方式，last-child为什么不生效？
仗剑天涯的专栏
10-28 1670
nth-of-type，nth-child 的正确使用方式，last-child为什么不生效？nth-of-type，nth-child的常用写法
CSS选择器之:nth-child(n)与:nth-last-of-type(number)
weixin_33819479的博客
04-13 347
这段时间在做一些东西，整理了其中遇到的一个关于CSS选择器的问题。 需要完成一个下图的侧边栏效果： 乍一看，很简单嘛，标签列表、弹框，完工！ 然后我就写了如下代码： <ul class="tag radius-8"> //标签 <li class="a"> code </li> ...
nth-last-child()和nth-last-of-type()的用法和区别
weixin_33827590的博客
07-26 658
终于搞明白nth-last-child()和nth-last-of-type()的区别了： <!DOCTYPE html> <html> <head> <title>css3</title> <style type="text/css"> ...
:last-child 与: last-of-type 的区别
qq_41286138的博客
03-31 3494
在设计列表的时候，会发现最后一个子元素与其他元素在样式上经常会有差异。 这种情况下，我们常常会使用:last-child和:last-of-type两种伪类来实现目的，那么这两种有何区别呢？ :last-child选择器用来匹配父元素中最后一个子元素 注意，该伪类前的标签是指子元素，而不是父元素，例如p:last-child是指作为最后一个子元素存在的p标签，而不是p标签中的最后一个子元素。 :...
CSS伪类选择器 ——:last-child、:nth-last-child(n)、:nth-last-of-type(n)
洛丹伦的夏天
11-28 6250
在系统的学习前端知识前，一直是JQuery的忠实用户，很大程度上是由于它能够很方便的获取Element对象，通过它强大的选择器 —— 《JQuery选择器》，让我们成功远离原生JS获取Element对象的苦恼和鸡肋： document.getElementsByClassName() document.getElementById() document.getElementsByName() d...
:nth-last-child
最新发布
03-07
:nth-last-child(n)选择器匹配父元素的倒数第n个子元素，无论其类型如何。这个选择器从最后一个子元素开始计数。例如，:nth-last-child(2)将匹配父元素的倒数第二个子元素。 以下是一个示例，演示如何使用:nth-last...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值