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)伪元素的使用方法: 选择器 ...
随机推荐
- Qt 自动搜索串口号列表
@功能: SerialPortList 类实现当前可用的串口进行实时扫描,当发现有新的串口 或是现有串口消失时,SerialPortList类将发出一个QStringList类型的 信号onNewSe ...
- Codeforces Round #201 (Div. 2) - C. Alice and Bob
题目链接:http://codeforces.com/contest/347/problem/C 题意是给你一个数n,然后n个数,这些数互不相同.每次可以取两个数x和y,然后可以得到|x - y|这个 ...
- iOS开发60分钟入门
原文:https://github.com/qinjx/30min_guides/blob/master/ios.md 本文面向已有其它语言(如Java,C,PHP,Javascript)编程经验的i ...
- oracle对序列的操作
select t.*, t.rowid from tbl_type t order by t.id desc Select SEQ_TBL_TYPE_ID.NextVal From Dual; ; ; ...
- 简谈HTML5与APP技术应用
HTML5到底能给企业带来些什么? HTML5是近年来互联网行业的热门词汇,火的很.微软IE产品总经理发文: 未来的网络属于HTML5.乔布斯生前也在公开信<Flash之我见>中预言:像H ...
- JS 命名空间 实现方式 收集
一. 对象注册式 // 声明一个全局对象Namespace,用来注册命名空间Namespace = new Object(); // 全局对象仅仅存在register函数,参数为名称空间全路径,如&q ...
- 图片攻击-BMP图片中注入恶意JS代码 <转载>
昨天看到一篇文章<hacking throung images>,里面介绍了如何在BMP格式的图片里注入JS代码,使得BMP图片既可以正常显示, 也可以运行其中的JS代码,觉得相当有趣. ...
- 【M20】协助完成“返回值优化(RVO)”
1.方法返回对象,会导致临时对象的产生,这降低了效率,const Rational operator* (const Rational& lhs,Rational& rhs).有没有什 ...
- 【M1】仔细区别pointers和references
1.引用必须初始化,而且不能修改指向,这一点和const对象十分相似. 2.引用和指针用法不同,对于引用int& ri = a; rhs是个对象,引用前面加&:对于指针,int* pi ...
- Codeforces Gym 100002 D"Decoding Task" 数学
Problem D"Decoding Task" Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com ...