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

这是最基本的样式：

 <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. SGU 171 Sarov zones （贪心）

    题目   SGU 171 相当好的贪心的题目!!!!! 题目意思就是说有K个赛区招收参赛队员,每个地区招收N[i]个,然后每个地区都有一个Q值,而N[i]的和就是N,表示总有N个参赛队员,每个队员都有 ...

  2. CSS构造超链接

    超链接边框 派生超链接 属性选择器超链接 动态超链接 图像翻转超链接 CSS工具提示 1.给链接加上边框     A:link {         Color: #f00;         Text- ...

  3. C语言简单实现sizeof功能代码

    sizeof不是函数,而是运算符,C/C++语言编译器在预编译阶段的时候就已经处理完了sizeof的问题,也就是说sizeof类似于宏定义. 下面给出一个sizeof的一个宏定义实现版本 #defin ...

  4. HttpWebRequest和HttpWebResponse用法小结

    http://www.cnblogs.com/willpan/archive/2011/09/26/2176475.html http://www.cnblogs.com/lip0121/p/4539 ...

  5. 多线程和Boost::Asio

    线程安全 一般的,高并发使用不同的对象是安全的,在高并发中使用单一的对象是不安全的,io_service类型提供了单对象高并发的强安全保证. 线程池 多线程可能调用io_service::run()来 ...

  6. 项目经验之:MVVM初学者图形化笔记整理。。。

    这个模式,一下子把我的思路给打开..让我眼前一亮..居然可以这样将界面分离得如此彻底........... 大家一起学习... 说说我的感受吧,一个小实例讲述了 MVVM实现原理: 一个简单的例,将两 ...

  7. MPAndroidChart

    该库的可扩展性强,代码相对规范,最近一次更新有很大改进,如果不喜欢AChartEngine的过于复杂可以考虑在此库的基础上开发自己的图表类. linechart 填充式lineChart 单条线的Li ...

  8. 关于C++与Java中虚函数问题的读书笔记

    之前一直用C++编程,对虚函数还是一些较为肤浅的理解.可近期由于某些原因搞了下Java,发现有些知识点不熟,于是站在先驱巨人的肩上谈谈C++与Java中虚函数问题. Java中的虚函数 以下是段别人的 ...

  9. 又来折腾Linux

    硬盘坏了之后就没装过Linux了,因为弄了一个很老的台式机的80G并口硬盘,根本不够用的,一直懒得理. 前段时间实验室的老机子得报销了,但是里面的东西还可以拆下来,所以又拆下了两个硬盘,这样就有三个8 ...

  10. Codeforces Round #278 (Div. 1) A. Fight the Monster 暴力

    A. Fight the Monster Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/487/ ...