:nth-last-child() 选择器 :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。 n 可以是数字、关键词或公式。 提示:请参阅 :nth-last-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素,从最后一个子元素开始计数。 CSS3 ...
这两个选择器是first-child及last-child的扩展选择器。这两个选择器的样式指定方法如下所示。 nth-child(n){ // 指定样式 } <子元素>:nth-last-child(n){ // 指定样式 } 将指定序号书写在“nth-child”或“nth-last-child”后面的括号中,如“nth-child(3)”表示第三个子元素,“nth-last-child(3)”...
doctype html><html><head><metacharset="utf-8"><title>nth-child(n)和nth-last-child(n)选择器的使用</title><styletype="text/css">/*p:nth-child(2){color: red;}*/p:nth-last-child(2){color:blue;}</style></head><body><h1>这是标题</h1><p>第一篇 毕业了</p><p>第二篇 关于考...
1.:first-child: 伪类选择器,选取其父元素的第一个子元素的元素 2.:last-child:伪类选择器,选取其作为父元素的最后一个子元素 3.:nth-child(n):伪类选择器,选其作为父元素的第n个子元素的元素。 4.:::before:伪元素选择器,所有子元素的最前面添加一个伪元素。 5,::after:伪类选择器,所有子类的最后添...
.demo01 li:last-child{background:#090} :nth-last-child(3)选取倒数第几个标签,3表示选取第3个 点此查看实例展示 .demo01 li:nth-last-child(3){background:#090} ok,:nth-child的这些用法在实际中很用得着,不用单独给需要选取的标签加上ID或Class,是不是很拉轰!
:nth-child CSS3 选择器实际上比你想象的更强大! 例如,这将选择 #container 的最后两个元素: #container :nth-last-child(-n+2) {} 但这只是一段美好友谊的开始。 :nth-child 浏览器支持 #container :nth-last-child(-n+2) { background-color: cyan; } <div id="container"> <div>a</div...
表2 选择器first-child、last-child、nth-child、nth-last-child 表3 选择器nth-of-type、nth-last-of-type 表4 循环使用样式 表5 选择器only-child、only-of-type 表6 CSS3中与用户界面有关的伪类选择器 5、nth-child与nth-of-type的区别:
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始 X:only-child这个伪类一般用的比较少,比如上述代码匹配的是div下的有且仅有一个的p,也就是说,如果div内有多个p,将不匹配。 X:nth-last-child(n)从最后一个开始算索引。 X:first-of-type匹配同级兄弟元素中的第一个X元素 ...
:first-child 第一个 :last-child 最后一个 :nth-child(x) 第x个 :nth-last-child(x) 倒数第x个 :checked 选中 :disabled 禁用 6,移动端 1px 问题及解决办法 1,认识设备的物理像素(设备像素)、逻辑像素(css像素)、设备像素比dpr 物理像素:设备在出厂的时候,不同设备自带的不同像素就是UI设计师使用的像...
nth-child(2){};代码如下ul li:nth-child(2){background-color:aqua;color:red;}，浏览器中查看效果，如图所示 6 剩下的设置方法相同，child后面的数字是几，就代表是第几个选块，然后分别设置背景颜色和字体颜色，效果如图所示。注意事项 如果此经验对您有帮助，请左侧点赞关注，谢谢大家的支持^_^ ...