伪类
选择器 类型 说明 备注
E:first-line 伪元素选择器 选择匹配E元素内的第一行文本
E:first-letter 伪元素选择器 选择匹配E元素内的第一个字符
E:before 伪元素选择器 在某个元素之前插入一些内容
E:after 伪元素选择器 在某个元素之后插入一些内容 清除浮动经常用
结构选择器
选择器 说明 备注
E:root 选择匹配E所在文档的根元素。在(X)HTML文档中,根元素就是html元素,此时该选择器与html类型选择器匹配的内容相同。
E:nth-child(n) 选择所有在其父元素中第n个位置的匹配E的子元素。 注意,参数n可以是数字(1、2、3)、关键字(odd、even)、公式(2n、2n+3)参数的索引从1开始。tr:nth-child(3)匹配所有表格中第3排的tr;tr:nth-child(2n+1)匹配所有表格的奇数行;tr:nth-child(2n)匹配所有表格的偶数行;tr:nth-child(odd)匹配所有表格的奇数行;tr:nth-child(even)匹配所有表格的偶数行;
E:nth-last-child(n) 选择所有在其父元素中倒数第n个位置的匹配E的子元素
E:nth-of-type(n) 选择父元素中第n个位置,且匹配E的子元素。 注意,所有匹配E的子元素被分离出来单独排序。非E的子元素不参与排序。参数n可以是数字,关键字、公式。例:p:nth-of-type(1)
E:nth-last-of-type(n) 选择父元素中倒数第n个位置,且匹配E的子元素。
E:last-child 选择位于其父元素中最后一个位置,且匹配E的子元素。
E:first-of-type 选择位于其父元素中且匹配E的第一个同类型的子元素。 该选择器的功能类似于 E:nth-of-type(1)
E:last-of-type 选择位于其父元素中且匹配E的最后第一个同类型的子元素。 该选择器的功能类似于 E:nth-last-of-type(1)
E: only-child 选择其父元素只包含一个子元素,且该子元素匹配E。
E: only-of-type 选择其父元素只包含一个同类型的子元素,且该子元素匹配E。
E:empty 选择匹配E的元素,且该元素不包含子节点。

E:nth-child(n)选择器说明

其他类型选择器

选择器 说明 备注
E:enabled 选择匹配E的所有可用UI元素。
E:disabled 选择匹配E的所有不可用UI元素。
E:checked 选择匹配E的所有可用UI元素。
E~F 通用兄弟元素选择器类型。 选择匹配F的所有元素,且匹配元素位于匹配E的元素后面。在DOM结构树中,E和F所匹配的元素应该在同一级结构上。
E:not(s) 否定伪类选择器类型。 选择匹配E的所有元素,且过滤掉匹配s选择符的任意元素。s是一个简单结构的选择器,不能使用符合选择器,
E:target 目标伪类选择器类型。 选择匹配E的所有元素,且匹配元素被相关URL指向。注意:该选择器是动态选择器,只有存在URL指向该匹配元素时,样式才起效果。

例:demo.html#id

例:input:checked匹配input type为radio及checkbox元素

css3 结构性伪类选择器的更多相关文章

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

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

  2. CSS3 结构性伪类选择器(2)

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

  3. CSS3 结构性伪类选择器(1)

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

  4. css3结构性伪类选择器

  5. h5与c3权威指南笔记--css3结构性伪类选择器root,not,empty,target

    root:将样式绑定到根元素(html中的根元素是<html></html>) 举个栗子 :root{ background-color: yellow; } body{ ba ...

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

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

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

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

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

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

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

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

随机推荐

  1. 深入理解ES6之——JS类的相关知识

    基本的类声明 类声明以class关键字开始,其后是类的名称:剩余部分的语法看起来像对象字面量中的方法简写,并且在方法之间不需要使用逗号. class Person { //等价于prototype的构 ...

  2. memcache 启动 储存原理 集群

    一. windows下安装启动 首先将memcache的bin目录加入到Path环境变量中,方便后面使用命令: 然后执行 memcached –dinstall 命令安装memcache的服务: 然后 ...

  3. C语言socket编程----实现UDP通信

    TCP/IP协议叫做传输控制/网际协议,又叫做网络通信协议.实际上,它包括上百个功能的协议. 套接字(socket):在网络中用来描述计算机中不同程序与其他计算程序的通信方式. 套接字分为三类; 流式 ...

  4. Android开发之漫漫长途 ⅥI——Android消息机制(Looper Handler MessageQueue Message)

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  5. 200行Java代码搞定计算器程序

    发现了大学时候写的计算器小程序,还有个图形界面,能够图形化展示表达式语法树,哈哈;) 只有200行Java代码,不但能够计算加减乘除,还能够匹配小括号~ 代码点评: 从朴素的界面配色到简单易懂错误提示 ...

  6. zkw模板

    水平有限,前缀和的前缀和什么的,rbq 两个操作: 1.区间l到r加上一个数x 2.查询区间[l,r]的区间和 #include<iostream> #include<cstdio& ...

  7. 【new File(String Path)加载资源问题】

    2017-12-17   15:07:38  [原创-wx] 一.我们在用IO流加载资源的时候,创建文件资源 1 File file = New File("String Path" ...

  8. window.open()被拦截问题

    最近做项目的时候遇到一个需求,在商品详情页面中点击购买按钮,之后再新标签页中打开生成的订单页面,所以想用window.open()来实现.但是测试的时候发现打开的链接被浏览器拦截. 之后,开始在网上查 ...

  9. PHP去除unicode续:json_encode之后,仅仅有文字,数字不见了的解决方法

    接前文.http://blog.csdn.net/yanzi1225627/article/details/44985487 这么处理了一段时间.确实没发现问题.但近期发现了一个bug.比方输入&qu ...

  10. Excel大写和小写转换函数

    Excel中的大写和小写转换函数 (1).转换为所有小写字母:lower函数 (2).转换为所有大写字母:upper函数 (3).转换为首字母大写,其余小写字母:proper函数 三种函数的使用方式. ...