有用的:nth-child秘方
作者:vocal 来源:前端观察 时间:2011-07-01 12:56:11
当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们,就能写出越好的CSS规则!
在这些简单的”秘方”(实际上是表达式)中我将重复的使用一个简单的列表并随即选择数字。但是很明显很容易改变它们以获得类似的选择器。
只选择第五个元素
li:nth-child(5){
color: green;
}
要选择第一个元素,你可以使用:first-child,或者我相信你也可以改下上面的例子来实现。
选择除了前面的五个之外的所有元素
li:nth-child(n+6){
color: green;
}
如果有超过10个元素,它将会选中超过5个。
只选择前面的5个
li:nth-child(-n+5){
color: green;
}
从开始的那个,选择每第四个
li:nth-child(4n-7) {
/* or 4n+1 */
color: green;
}
选择奇数或者偶数
li:nth-child(odd){
color: green;
}
li:nth-child(even){
color: green;
}
当然这里也有另外两种实现,你懂的——神飞
选择最后一个元素
li:last-child {
color: green;
}
选择倒数第二个
li:nth-last-child(2){
color: green;
}
从这个例子可看出,上面那个例子也有第二种实现方法。
浏览器支持
有趣的是,:first-child 和:last-child被IE 7支持,但是知道IE9才支持剩下的选择器。如果你担心IE,可以使用Selectivizr。如果你浏览器兼容性对你很重要,请关注When can I use…
嗯,使用CSS3选择器是件很有趣的事情,像做简单的数学题一样。
译自:Useful :nth-child Recipies
中文:有用的:nth-child秘方
标签:nth-child,li
0
投稿
猜你喜欢
C#中通过使用Connection类来实现打开/关闭数据库的代码实例
2024-01-21 22:36:55
python 2.7.14安装图文教程
2023-09-22 16:08:33
Softmax函数原理及Python实现过程解析
2022-12-15 02:18:24
CentOs7.x安装Mysql的详细教程
2024-01-27 11:11:45
vs code开发中语法正确但显示报错问题分析解决
2023-08-05 11:54:26
python中的线程threading.Thread()使用详解
2021-02-25 21:38:38
python进阶教程之异常处理
2023-10-14 23:04:17
MySQL load语句详细介绍
2024-01-27 01:31:05
Python PyQt5实战项目之网速监控器的实现
2023-05-25 12:57:07
python装饰器原理与用法深入详解
2021-01-13 09:17:19
[翻译]标记语言和样式手册 Chapter 13 为文字指定样式
2008-02-15 16:08:00
反向传播BP学习算法Gradient Descent的推导过程
2022-09-08 09:51:06
Python发起请求提示UnicodeEncodeError错误代码解决方法
2022-09-14 09:47:36
关于PowerDesigner初体验的使用介绍
2024-01-13 04:15:25
python中显存回收问题解决方法
2022-06-28 03:06:29
python实现图片横向和纵向拼接
2021-12-20 20:53:30
pandas创建series的三种方法小结
2023-02-28 20:59:23
python爬虫框架feapder的使用简介
2021-07-20 14:38:27
GoLang并发机制探究goroutine原理详细讲解
2023-08-30 05:41:33
FrontPage XP设计制作网页小技巧八则
2008-06-04 12:43:00