CSS选取第几个标签元素:first-child、last-child、nth-child
分类:网页设计 Tags: nth-child first-child last-child 评论:0 浏览:6768 最近更新时间:2018/11/5 9:58:16
1、first-child
first-child表示选择列表中的第一个标签。代码如下:
li:first-child{background:#090}
上面的意思是,li 列表中的 第一个li模块的背景颜色。
2、last-child
last-child表示选择列表中的最后一个标签,代码如下:
li:last-child{background:#090}
3、nth-child(3)
表示选择列表中的第3个标签,代码如下:
li:nth-child(3){background:#090}
上面代码中的3也可以改成其它数字,如4、5等。想选择第几个标签,就填写几。
4、nth-child(2n)
这个表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签。
5、nth-child(2n-1)
这个表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签。
6、nth-child(n+3)
这个表示选择列表中的标签从第3个开始到最后。
7、nth-child(-n+3)
这个表示选择列表中的标签从0到3,即小于3的标签。
8、nth-last-child(3)
这个表示选择列表中的倒数第3个标签。
last-of-type表示其父元素下的最后一个指定类型的元素。
-
• 10个国外墙纸图片素材网站
• js实现图片等比缩略显示代码,支持IE,Firefox浏览器
• 如何使网页支持PNG透明(IE6、IE7、firefox下测试通过)
• 如何将文本输入框与文本不对齐,input对齐同一行文字
• 英文网站/英文名片电话号码的正确写法
• 关于网站paypal在线支付接口代码问题
• 网页制作中CSS样式常用技巧
• Dreamweaver CS3集成AJAX框架Spry之表单检测试用
• iis如何支持.webp图片格式访问
• 几行代码搞定FLASH动态切换图片效果
-
• 如何推广英文外贸网站?
• HP惠普笔记本Microsoft ACPI-Compliant System未知设备的解决办法
• js兼容IE、谷歌Chrome、火狐Firefox的上传图片预览代码
• ASP搜索关键词时结果用红色显示代码
• 关于网站paypal在线支付接口代码问题
• rs.open sql,conn,1,1和rs.open sql,conn,1,3的意思
• iis如何支持.webp图片格式访问
• FCKEditor2.5编辑器设置及修改方法For ASP,支持UTF-8编码
• 263企业邮箱配置foxmail收发信教程
• 如何免费点亮、关闭熄灭QQTalk团队语音图标?