css3 巧用结构性伪类选择器
最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法，觉得十分实用，就自己尝试了一下，并把它给记录下来：
这是最基本的样式：
<style type="text/css">
li{
list-style-type: none;
float: left;
width: 60px;
height: 60px;
background-color: #979698;
margin-left: 10px;
text-align: center;
line-height: 60px;
border-radius: 50%;
}
</style>
body内的内容：
<body>
<ul>
<li>第01个</li>
<li>第02个</li>
<li>第03个</li>
<li>第04个</li>
<li>第05个</li>
<li>第06个</li>
<li>第07个</li>
<li>第08个</li>
<li>第09个</li>
<li>第10个</li>
<li>第11个</li>
</ul>
</body>
首先是最基本的结构性伪类选择器的用法：
li:nth-child(8){
background-color: #298EB2;
}
结果展示为：
利用:nth-child(n+6) 相当于:nth-child(6)及以上的li标签元素：
li:nth-child(n+6){
background-color: #298EB2;
}
结果展示为：
同理利用:nth-child(-n+6) 相当于:nth-child(6)及以下的li标签元素：
li:nth-child(-n+6){
background-color: #298EB2;
}
结果展示为：
根据以上原理我们可以来一些进阶的：
比如可以利用 nth-child(n+4):nth-child(-n+8) 达到获取:nth-child(4)及以上和:nth-child(8)及以下的li标签元素：
li:nth-child(n+4):nth-child(-n+8){
background-color: #298EB2;
}
结果展示为：
还可以利用 :nth-child(n+2):nth-child(odd):nth-child(-n+8) 获取:nth-child(n+2)到:nth-child(-n+8)之间的单数li标签元素：
li:nth-child(n+2):nth-child(odd):nth-child(-n+8){
background-color: #298EB2;
}
结果展示为：
最后我们还可以利用:nth-child(3n+1)获取数目为1、4、7、10中的偶数li标签元素：
li:nth-child(3n+1):nth-child(even){
background-color: #298EB2;
}
结果展示为：
css3 巧用结构性伪类选择器的更多相关文章
- CSS3每日一练之选择器-结构性伪类选择器
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
- CSS3 结构性伪类选择器（2）
CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...
- CSS3 结构性伪类选择器（1）
1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...
- 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)
结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...
- 【CSS3】---结构性伪类选择器-first-child+last-child
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...
- 【CSS3】---结构性伪类选择器-root+not+empty+target
结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...
- 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- H5与CS3权威下.19 选择器（2）结构性伪类选择器
1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...
随机推荐
- [每日一题] 11gOCP 1z0-053 :2013-10-11 Flashback Data Archive属性.........................43
转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/12656897 正确答案:BD 闪回数据归档请参考:http://blog.csdn.net ...
- Unity3D之游戏暂停制作方法记录
在游戏开发中我们一般都需要涉及到一个功能:游戏暂停,但是这里指的暂停仅仅是核心模块的暂停,并不是整个游戏都暂停,比如一些UI和UI上的动画与特效是不能被暂停的,整个游戏都暂停了玩家该如何继续游戏呢. ...
- python视频教程大全
python3英文视频教程(全87集) http://pan.baidu.com/s/1dDnGBvV python从入门到精通视频(全60集)链接:http://pan.baidu.com/s/1e ...
- Winform开发框架之权限管理系统
本文章转载:http://www.cnblogs.com/wuhuacong/archive/2011/05/08/2040620.html 至此,权限管理模块介绍已经完毕,下面给出一个调用例子Dem ...
- HTML5 - HTML5 postMessage API 注意事项
一:发送 window.postMessage("Hello, world", "http://127.0.0.1:8080"); 注意,必须要加上http:/ ...
- 算法效果AB测试中的PV-UV不对称性
(转载请注明原创于潘多拉盒子) 算法效果的AB测试,是指在相同的应用场景下,对比不同算法的效果.通常的做法是,按照PV或UV随机分配流量到算法上,计算算法的CTR或转化率进行对比.为了表述简单,我们假 ...
- 【转】Rails 3.1错误-Could not find a JavaScript runtime及execjs和therubyracer介绍
转自:http://rubyer.me/blog/740/ Rails 3.1错误 /gems/execjs-1.1.2/lib/ execjs/runtimes.rb:43:in `autodete ...
- stm32上的Lava虚拟机开发进度汇报（1）
这几天我打算在stm32上做一个lava的虚拟机,只要160*80的黑白显示就行了,主要是想怀旧一下,嘿嘿. 目前的进度是图形显示和按键处理完成了,还有文本显示.文件处理.其他函数等. 当然,这都仅是 ...
- 读《C# 和 Java 的比较》有感
网上的一篇<C# 和 Java 的比较>(或者叫<Java 和 C# 的比较>)写的挺不错的,今天忽然搜索到. 自己刚刚接触C#,也不由自主地随时都拿来和Java做对比,所以就 ...
- Android通过http协议POST传输方式
Android通过http协议POST传输方式如下: 方式一:HttpPost(import org.apache.http.client.methods.HttpPost) 代码如下: privat ...