在一些项目中,我们常常需要实现选择类似于3的倍数的位数的元素,或者从第n个之后的元素,或者从第n个到第m个元素这种类型的选择,如果说在以前,想完全通过css实现,似乎是天方夜谭,根本不可能实现,CSS3的出现,给我们提供了类似的选择器,但是又有多少人能够真正通过CSS3选择器实现这些功能呢?

下面,列举几种类似的选择器:

1、选择第一个元素

ul li:first-child{}

  这个是css3直接提供的选择器,相对应的就有选择最后一个

2、选择最后一个元素

ul li:last-child{}

3、选择从第m个到最后一个元素,包括第m个元素

ul li:nth-child(n+m){}

4、选择倒数第m个元素

ul li:nth-child(-n+m){}

5、选择从第start个元素到第end个元素

ul li:nth-child(n+start):nth-child(-n+end){}

6、选择所有元素,除了第m个

ul li:not(:nth-child(m)){}

7、选择3的倍数的元素

ul li:nth-child(3n){}

  

这其中,如果能够了解:nth-child和:nth-of-type的区别的话,可以实现更多有意思的选择,是不是按捺不住了?

赶紧试试吧!

 

css3选择的更多相关文章

  1. CSS3选择器之:nth-child(n)

    第一次用到这个选择器还是为了解决下面了的问题: 手机的前端,我们使用了mint-ui,里面有一个日期选择控件,但是选择的时候没有提供年月的选择器,如: 而是提供了下面的方式: 为了达到上面的效果,使用 ...

  2. css3选择符使用个人理解。

    元素选择符: 通配选择符:一般用* 星号表示  他会命中整体标签. 类型选择符:一般用者空格表示  他会命中标签自己的所有子元素. ID选择符:  一般用# 井号表示  他会命中以id为属性的标签   ...

  3. 晨读笔记:CSS3选择器之属性选择器

    一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...

  4. CSS3选择器之属性选择器

    一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...

  5. CSS3选择器之学习笔记

    首先说first-child与last-child,这两个选择器很容易明白,就是父元素下的第一个子元素和最后一个子元素.而nth-child和nth-last-child则是父元素下指定序号的子元素, ...

  6. css3选择符

    常用的选择符 1.元素选择符 2.id选择符 3.class选择符 4.通配符 5.群组选择符 6.包含选择符 7.伪类选择符(伪类选择符CSS中已经定义好的选择器,不能随便取名) 8.伪对象选择符( ...

  7. 抛弃jQuery:DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

  8. CSS基础篇之选择符2

    属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...

  9. CSS基础篇之选择符

    关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...

随机推荐

  1. 一道Linux 面试题

    一个文本文件info.txt的内容如下:aa,201zz,502bb,1ee,42每行都是按照逗号分隔,其中第二列都是数字,请对该文件按照第二列数字从大到小排列 答案:cat info.txt|awk ...

  2. jmap MAT内存溢出实践

    jmap MAT内存溢出实践 一.创建Spring Boot工程 进入https://start.spring.io/网站,配置如下图 点击创建工程,然后用Idea或者Eclipse打开 二.创建模拟 ...

  3. NET设计模式 第二部分 结构性模式(14):结构型模式专题总结

    ——探索设计模式系列之十五 Terrylee,2006年5月 摘要:结构型模式,顾名思义讨论的是类和对象的结构,它采用继承机制来组合接口或实现(类结构型模式),或者通过组合一些对象,从而实现新的功能( ...

  4. Linux paste命令详解

    Linux paste命令 Linux paste命令用于合并文件的列.paste指令会把每个文件以列对列的方式,一列列地加以合并 将每个指定文件里的每一行整合到对应一行里写到标准输出,之间用制表符分 ...

  5. Logback 入门和配置说明

    Logback 是 Log4j 的改进版本,而且原生支持 SLF4J,Logback 的初始化步骤如下: 在类路径中查找 logback-test.xml 配置文件 在类路径中查找 logback.g ...

  6. 阿里云 持续集成环境自动部署cordova项目热更新脚本

    linux脚本: #!/bin/sh rm -rf /home/tomcat/xiecang_hybird_web/xiecang_hybird_web.zip rm -rf /home/tomcat ...

  7. Excel技巧--空白处补零

    当我们有一表格,而表格的空白单元格要补零时,如下图: 那么手动添加零比较麻烦,特别是行数很多时.可以用如下方法: 1.使用“替换”功能: 查找内容为空,替换处填写0,然后点击全部替换即可. 2.使用定 ...

  8. 【巷子】---middleware---redux-promise-middleware---【react】

    一.Middleware的由来 单一的state是存储在store中,当要对state进行更新的时候,首先要发起一个action(通过dispatch函数),action的作用就是相当于一个消息通知, ...

  9. java流程控制与选择控制

    流程控制语句 顺序   程序的正常执行 选择 if else多重if,嵌套if,switch; 循环 for whlie,do whlie; 案例1 自己对代码进行改进!!!!!!!!!!!!!!! ...

  10. C#发布程序添加其他程序文件

    注:程序发布文件,默认只发布自身程序直接引用的相关文件(A程序). 如果需要添加其他程序(不同的应用程序B)文件,操作方法如下: 第一步:将B程序文件复制到A程序 第二步:将B程序文件右键--> ...