css取第一个孩子,CSS：第n个孩子（）：后(css :nth-child() :after)

你可以，但你做错了..

问题是，您的所有p元素都在里面li 。因此，所有的人都是他们的第一个孩子li容器。

你需要把nth-child的li元素。

#id li:nth-child(1) p:after,

#id li:nth-child(2) p:after,

#id li:nth-child(3) p:after {

content: 'OM';

color: pink;

}

#id li:nth-child(4) p:after,

#id li:nth-child(5) p:after,

#id li:nth-child(6) p:after {

content: 'Nom';

color: blue;

}

引用W3C的文档

的:nth-child(an+b)伪类表示法表示在文档树具有+ B-1 的兄弟姐妹之前，对于任何正整数或正的零值的元素，并具有一个父元素。

更新1

您也可以通过使用简化这个

#id li:nth-child(-n+3) p:after {

content: 'OM';

color: pink;

}

#id li:nth-last-child(-n+3) p:after { /*this means last 3*/

content: 'Nom';

color: blue;

}

演示在http://jsfiddle.net/gaby/4H4AS/2/

更新2

如果你想第一个只有六分是不同的( 而不是第一个3和最后3)你可以

#id li:nth-child(-n+6) p:after { /*this means first 6*/

content: 'Nom';

color: blue;

}

#id li:nth-child(-n+3) p:after {/*this means first 3 and since it comes second it has precedence over the previous for the common elements*/

content: 'OM';

color: pink;

}

演示在http://jsfiddle.net/gaby/4H4AS/3/

css取第一个孩子,CSS：第n个孩子（）：后(css :nth-child() :after)相关推荐

HTML+CSS（第一周）
1.<title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中.网页的title标签用于告诉用户和搜索引擎 ...
[你必须知道的css系列]第一回：丰富的利器2：CSS选择符之子选择符、相邻选择符...
对了,接下来要讲的属性选择符,相邻选择符,子对象选择符可能大家稍微有点陌生了,这当然也是有原因的,因为IE6及以下的浏览器并不支持这几个选择符,而大多数从事这方面工作的技术人员,多数时候还是主要考虑 ...
[css] 判断第一行和第二行的颜色分别是什么？并解释为什么？
[css] 判断第一行和第二行的颜色分别是什么?并解释为什么? <style> .red {color:red;} .green {color:green;} </style> ...
css 选取第一个标签元素
css 选取第一个标签元素方法一:直接获取对应class类名的第一个标签 <div class="idcardlist"> <div class="i ...
关于CSS选择第一个和倒数第一个元素的方法
本文主要介绍了CSS选择第一个和倒数第一个元素的解决方法,这里用到了first-child和:last-child,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要 ...
【Hello CSS】第一章-CSS的语法与工作流
作者:陈大鱼头 github: KRISACHAN 在上一篇[Hello CSS]的序章CSS起源中介绍了CSS的诞生原因以及发展历史,了解了CSS的存在意义.从正篇篇开始将会正式开始介绍CSS这门语 ...
css取li的点,CSS 去掉点li 的点
转:http://blog.sina.com.cn/s/blog_63b13c300100jyek.html 方法一: 百度雅虎新浪谷歌方法二: li {list-style-type:non ...
web第一课模拟淘宝设置静态网页——html+css布局设计
学会使用webstorm 先打开webstorm(注意需要破解)然后注意首次打开之后会出现让你新建一个存放所有文件的目录(如下图所示文件保存在c盘路径为C:\Users\baitianmeng\Web ...
0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...

css取第一个孩子,CSS：第n个孩子（）：后(css :nth-child() :after)

css取第一个孩子,CSS：第n个孩子（）：后(css :nth-child() :after)相关推荐

最新文章

热门文章