最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法，觉得十分实用，就自己尝试了一下，并把它给记录下来：

这是最基本的样式：

 <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 巧用结构性伪类选择器的更多相关文章

  1. CSS3每日一练之选择器-结构性伪类选择器

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...

  2. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  3. CSS3 结构性伪类选择器（2）

    CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...

  4. CSS3 结构性伪类选择器（1）

    1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...

  5. 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)

    结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...

  6. 【CSS3】---结构性伪类选择器-first-child+last-child

    结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...

  7. 【CSS3】---结构性伪类选择器-root+not+empty+target

    结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...

  8. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. H5与CS3权威下.19 选择器（2）结构性伪类选择器

    1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...

随机推荐

  1. 蓝桥杯 入门训练 Fibonacci数列

      入门训练 Fibonacci数列   时间限制:1.0s   内存限制:256.0MB        问题描述 Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1. ...

  2. 13个Cat命令管理文件实例汇总

    在Linux系统中,大多数配置文件.日志文件,甚至shell脚本都使用文本文件格式,因此,Linux系统存在着多种文本编辑器,但当你仅仅想要查看一下这些文件的内容时,可使用一个简单的命令-cat. c ...

  3. Educational Codeforces Round 7 - E. Ants in Leaves

    题目链接:http://www.codeforces.com/contest/622/problem/E 题意是给你一棵树,1为根,每个叶子节点有一个蚂蚁,移动到一个邻接节点时间耗费为1,一个节点上不 ...

  4. spring对数据库特殊字段的支持

    1.CLOB <property name="tomdTemplateContent" type="org.springframework.orm.hibernat ...

  5. MySQL select into outfile用法

    select into outfile用法 SELECT ... FROM TABLE_A INTO OUTFILE "/path/to/file" FIELDS TERMINAT ...

  6. transition:all 0.5s linear;进度条动画效果 制作原理

    Html: <span class="progress"><b ><i></i></b><em>50< ...

  7. 超轻量级spring模板方案

    最近从事的工作是web方面的,主要j2ee,spring jsp这些内容,由于刚入门,很多的技术都不了解.所谓初生牛犊不怕虎,刚入门,各种不顺手,比如写jsp,总是重复很多的代码,各种不爽,然后就去看 ...

  8. Python3学习

    要做一个儿童搜索引擎的项目(www.kidsearch.cn),所以开始接触各种新的语言,初步学了PHP爬虫,觉得要做大点的项目用PHP确实不太方便,中文兼容性就是一个比较棘手的问题.python的爬 ...

  9. Linux下C程序的编辑，编译和运行以及调试

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  10. eclipse/MyEclipse 日期格式、注释日期格式、时区问题[转]

    http://www.cnblogs.com/hoojo/archive/2011/03/21/1990070.html 在eclipse/MyEclipse中,如果你的注释或是运行System.ou ...