首页 > Web开发 > 详细

css3选择器

时间：2015-06-09 13:39:45 阅读：181 评论：0 收藏：0 [点我收藏+]

标签：

一、通用选择器

E~F：任何在E元素之后的同级F元素
E+F：在E元素后一个的同级F元素
E>F：所有在E元素下一级中的F元素

二、属性选择器

E[style="xxx"] ，如 input[type=text]{ background-color: blue; }；只有在body中E包含style="xxx"的才会选上
E[attr ^= val] ，如：li[id ^= t]；在E中只有开头是val才会选上
E[attr $= val] ，如：li[id $= e]；在E中的att里，结尾是val才会选上
E[attr *= val] ，如：li[id *= i]；在E中的att里，只要有val的就会选上

应用实例：百度文库

技术分享

技术分享

三、结构性伪类

E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配E父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
E:first-letter 对第一个字符进项定义
E:first-line 对第一行进行定义

标签：

原文地址：http://www.cnblogs.com/pan-hello/p/4563092.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！