css3选择

时间:2022-08-30 09:52:32

在一些项目中,我们常常需要实现选择类似于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. 使用Netty绑定一个端口如何分辨出多种类型的DTU的注册包

    一.  背景 项目需要使用Netty和DTU(无线数据传输模块)通信,需要接入多种类型的DTU,每种dtu连接上来之后都首先会发送一个注册报文.需要解析该注册报文来实现: 1. 分辨出是哪种类型的dt ...

  2. PHP中file&lowbar;put&lowbar;contents追加时换行

    很多时候记录日志需要换行.不建议使用\r\n,因为:在windows中\r\n是换行在Mac中\r是换行在Liunx中\n是换行 但是PHP提供了一个常量来匹配不同的操作系统,即: file_put_ ...

  3. 161116、springmvc自己实现防止表单重复提交(基于注解)

    原理:在去某个页面直接生成一个随机数(这里使用的是UUID)并放入session中,用户提交表单时将这个随机数传入服务端与session中的值进行比较,如果不不存在或不相等,则认为是重复提交:如果相等 ...

  4. PHP生成word的三种方式

    摘要: 最近工作遇到关于生成word的问题 现在总结一下生成word的三种方法. btw:好像在博客园发表博客只要是标题带PHP的貌似点击量都不是很高(哥哥我标题还是带上PHP了),不知道为什么,估计 ...

  5. Git教程&lpar;7&rpar;用合并还是变基?

    合并或变基前的样子:分支experiment与master两个分支都产生了提交. 图1. 未合并或变基前的样子 合并 原理: 找到两个分支的最末提交和最近的共同祖先,在执行git merge时所处的分 ...

  6. ie版本判断的js hack

    常用来判断各种浏览器版本的 ie js hack如下: 1. <!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–> 2. < ...

  7. 【技术分享】手把手教你使用PowerShell内置的端口扫描器

    [技术分享]手把手教你使用PowerShell内置的端口扫描器 引言 想做端口扫描,NMAP是理想的选择,但是有时候NMAP并不可用.有的时候仅仅是想看一下某个端口是否开放.在这些情况下,PowerS ...

  8. C&num;中 计时器用法

    有时候我们会需要计算某段代码运行的时间比如一个sql查询,记录一段代码所花费的时间等等代码如下: System.Diagnostics.Stopwatch watch = new System.Dia ...

  9. AMD 和 CMD 的区别

    AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMD CMD 规范在这里:https://github.com/seajs/seajs/issue ...

  10. tomcat server&period;xml

    基于对server.xml的学习,结合源码,可以进一步理解tomcat的架构设计 1. 2. 3. 4 .valve链 参考: http://www.importnew.com/17124.html ...