在一些项目中,我们常常需要实现选择类似于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. php调用C#生成的dll(二)

    根据上一篇博文,php调用c#生成的动态库,运行测试时报Fatal error: Class 'COM' not found in XXXXXXXXX 原因是php.ini中未开启COM组件的应用,解 ...

  2. insert into on duplicate key update

    问题 有一个表,建表语句如下: CREATE TABLE `tbl_host` ( `id` bigint(64) NOT NULL AUTO_INCREMENT, `ip` varchar(255) ...

  3. chgrp命令详解

    Linux chgrp命令 Linux chgrp命令用于变更文件或目录的所属群组. 在UNIX系统家族里,文件或目录权限的掌控以拥有者及所属群组来管理.您可以使用chgrp指令去变更文件与目录的所属 ...

  4. Ribbon 使用入门

    Ribbon 是 Netflix 下的负载均衡项目,在集群中为各个客户端的通信提供支持,主要实现中间层应用程序的负载均衡,提供以下特性: 负载均衡器,可支持插拔式的负载均衡规则 对多种协议提供支持,例 ...

  5. 有10 亿个 url,每个 url 大小小于 56B,要求去重,内存只给你4G

    问题:有10 亿个 url,每个 url 大小小于 56B,要求去重,内存只给你4G 思路: 1.首先将给定的url调用hash方法计算出对应的hash的value,在10亿的url中相同url必然有 ...

  6. SpringBoot Laravel(artisan serve) MIXPHP简单性能测试

    测试条件: CPU: 2C 4T 2.8GHZ MEM: 8G DISK: 512GB SSD OS: OS X 10.11.6 测试指令 ab -n 2000 -c 10 测试表现 MIXPHP R ...

  7. Oracle Split字符串

    为了让 PL/SQL 函数返回数据的多个行,必须通过返回一个 REF CURSOR 或一个数据集合来完成.REF CURSOR 的这种情况局限于可以从查询中选择的数据,而整个集合在可以返回前,必须进行 ...

  8. PHP 下载中文乱码解决

    利用 iconv() 函数解决乱码 $file_name = iconv("utf-8","gb2312",$file_name); 原文链接 http://m ...

  9. Ubuntu 14.10 下HBase错误集

    1 如果机群时间不同步,那么启动子节点RegionServer就会出问题 aused by: org.apache.hadoop.hbase.ipc.RemoteWithExtrasException ...

  10. 不同三级域名与二级域名之间互相共享Cookie

    当你在项目中遇到这样一个问题,有多个站点在多个二级级域名如果要实现各域名站点下的登录状态共享,那么最简单的方法就是共享Cookie. 首先声明几个概念,域名怎么去区分. 顶级域名:.com,.cn,. ...