选择器的使用(nth-child和nth-last-child选择器)

最新推荐文章于 2022-12-22 14:33:02 发布
最新推荐文章于 2022-12-22 14:33:02 发布
阅读量232 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/jason-davis/p/4009691.html
版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        li:nth-child(2) {
        background-color:limegreen;
         /*从左开始计数， li:nth-child(2) 就是第2个*/
        }
        li:nth-last-child(1) {
       
        background-color:red;
        /*从last开始计数， li:nth-last-child(1) 就是倒数第一个*/
        }
    </style>
</head>
<body>
    <h2>列表A</h2>
    <ul>
        <li>列表项目1</li>
        <li>列表项目2</li>
        <li>列表项目3</li>
        <li>列表项目4</li>
        <li>列表项目5</li>
    </ul>
</body>
</html>

效果如下：

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*li:nth-child(2) {
        background-color:limegreen;
        从左开始计数， li:nth-child(2) 就是第2个
        }
        li:nth-last-child(1) {
       
        background-color:red;
        从last开始计数， li:nth-last-child(1) 就是倒数第一个
        }*/
         li:nth-child(odd) {
        background-color:limegreen;
        /*所以正数上去的偶数个元素*/
        }
        li:nth-last-child(even) {
       
        background-color:red;
       /*所有倒数上去的奇数个元素*/
        }
    </style>
</head>
<body>
    <h2>列表A</h2>
    <ul>
        <li>列表项目1</li>
        <li>列表项目2</li>
        <li>列表项目3</li>
        <li>列表项目4</li>
        <li>列表项目5</li>
    </ul>
</body>
</html>

效果如下：

转载于:https://www.cnblogs.com/jason-davis/p/4009691.html

weixin_33695082
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
后代选择器+nth-child()选择器
Fawna_huang的博客
09-25 2746
后代选择器“>”+nth-child()选择器之前一道面试题： .list img{ width: 10px; height: 20px; background: blue; } .list>p:nth-child(even) img{ background: red; } .list>p:last
CSS3-nth-child() 选择器的使用
weixin_44486539的博客
09-29 805
:nth-child(n) 选择属于其父元素的第 n 个子元素 相对于父级做参考，选择所有子元素中匹配元素的奇数子元素；被选中的元素符合匹配条件且为奇数个的元素 .dl_box dd:nth-child(odd){ color: skyblue; } 相对于父级做参考，选择 所有子元素中匹配元素的偶数子元素 .dl_box dd:nth-child(even){ color: red; } ...
:first-child() :last-child() :nth-child()使用的注意事项
weixin_41671709的博客
09-07 543
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
10.CSS3样式
a1303490776的博客
04-26 896
CSS样式总结
CSS选择器nth-child()、first-child()、last-child()、not()
m0_46318298的博客
12-22 4890
CSS选择器nth-child()、first-child()、last-child()、not()
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...
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-last-child伪类
杭州.黄老师
04-03 3568
小程序中的WXSS(css)选择器课程-伪类-:nth-last-child伪类 定义和用法 :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式。 提示：请参阅 :nth-last-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素，从最后一个子元素开始计数。 浏...
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()`。这些选择器允许更精确地定位...
jquery nth-child()选择器的简单应用
01-21
通过网上咨询使用这个选择器便很容易的解决。特此记录一下。 下面是主要的代码 js脚本： 代码如下: [removed] $(document).ready( function () { //每隔五行给li加一个样式 $(‘.article_li li:nth-child(5n)’)....
jQuery中:last-child选择器用法实例
10-24
在jQuery中，`:last-child`选择器是一种非常实用的...通过熟练掌握`:last-child`以及其他类似的选择器，如`:first-child`、`:nth-child(n)`等，你可以编写出更加优雅和高效的jQuery代码，提高网页的交互性和用户体验。
微信小程序界面设计-小程序中的WXSS(css)选择器
01-18
讲解微信小程序中如何使用css选择器，哪些选择器支持哪些选择器不支持，讲解选择器分组,属性选择器,后代选择器,子元素和相邻兄弟选择器,伪类选择器,伪元素选择器,微信小程序中样式css选择器等
nth-child的使用方法
热门推荐
Evan's Blog ٩(๑❛ᴗ❛๑)۶
06-09 8万+
一、需求描述 在开发过程中，会碰到一些选择器的需求： 例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。 我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。 二、使用方法的代码示例 1.常见使用方法 first-child first-child：选择列表中的第一个标签。 举例：第一行字体显示为红色，代码如下： li:first-child{ c
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……...
CSS3技巧--巧妙运用first-child和nth-last-child实现元素个数选择器
DoubleBird的博客
08-28 2123
有时候可能我们会有这样一种需求 当div内有1个元素时应用某种样式，当div内有2个元素时又利用不同的样式。。。。以此类推。 但是CSS中除了only-child可以选择只有一个元素的情况，那么别的情况怎么办？ /* 一个元素时 */ li:first-child:nth-last-child(1) { /* -或者可以使用- li:only-child { */ width: ...
first-child、 last-child 和 nth-child(n) 区别
奋斗的小猪
08-20 2470
1.nth-child(n)选择器 匹配父元素中的第n(从0开始)个子元素；其中n可以是一个数字或表达式。 //选择列表的第二个标签设置其背景色为红色 li:nth-child(2){ background-color: red; } //选择倒数第2个li li:nth-last-child(2){ background-color: red; } 2.last-child selec...
详解CSS3中:nth-child的用法
z983002710的博客
06-30 1万+
详解CSS3中:nth-child的用法
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:last-child 伪类
杭州.黄老师
04-03 3155
小程序中的WXSS(css)选择器课程-伪类-:last-child 伪类 定义和用法 :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。 提示：p:last-child 等同于 p:nth-last-child(1)。 浏览器支持 所有主流浏览器均支持 :last-child 选择器，除了 IE8 及更早的版本。 实例 指定属于其父元素的最后一个子元素的 p 元素的背景...
利用 :first-child 和 :nth-last-child 确定子元素数目
weixin_30335353的博客
05-07 297
读《css揭秘》时，发现选择器的神奇作用，可以确定子元素数目，比如： li:first-child:nth-last-child(2),li:first-child:nth-last-child(2)~li { background-color:pink; } 这个适用于第一个子元素为li且父元素拥有2个子元素，则第一个li和后续的li都将适用，并且如果有更多或更少的子元素都不会适用。 仔细思...
css选择器nth-last-child
最新发布
08-11
:nth-last-child() 是一个 CSS 伪类选择器，用于选择父元素下的倒数第 n 个子元素。它的语法如下： ```css :nth-last-child(n) ``` 其中，n 是一个整数，表示要选择的倒数第几个子元素。 举个例子，如果我们有一个父元素包含 6 个子元素，我们可以使用 :nth-last-child(2) 来选中倒数第二个子元素。 ```css .parent div:nth-last-child(2) { /* 样式 */ } ``` 在上述示例中，只有倒数第二个子元素会应用样式。 还可以通过使用关键字来选择特定的子元素。例如，:nth-last-child(odd) 选择倒数第奇数个子元素，:nth-last-child(even) 选择倒数第偶数个子元素。 希望这能帮助到你！如果你有任何其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值