用的比较少 看到知道怎么回事就ok

http://www.w3.org/TR/css3-selectors/#selectors

http://www.cnblogs.com/jscode/archive/2012/07/30/2615748.html

新增选择器列表:

  E[foo^="bar"]:匹配foo属性值以"bar"开始的E元素

  E[foo$="bar"]:匹配foo属性值以"bar"结束的E元素

  E[foo*="bar"]:匹配foo属性值包含"bar"的E元素

  这几个选择器很简单,其实在jQuery的选择器中早就包含了,所以就不多说了。

浏览器兼容性: 

  • IE 6
  • IE 7
  • IE 8
  • IE 9
  • Chrome 1.0.x
  • Chrome 2.0.x
  • Chrome 3.0.x
  • Chrome 4.0.x
  • FireFox 1.5
  • FireFox 2.0
  • FireFox 3.0
  • FireFox 3.5
  • Opera 9.0
  • Opera 9.6
  • Opera 10.0
  • Opera 10.5
  • Safari 3.1
  • Safari 4.0

  连IE7、8都提供了支持,IE6正逐渐被淘汰,所以放心地用吧。

结构伪类选择器

新增结构伪类选择器列表:

  E:root:匹配E所在文档的根元素

  E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素

  E:nth-last-child(n):匹配元素类型为E且是父元素的倒数第n个子元素(与上一项顺序相反)

  E:nth-of-type(n):匹配父元素的第n个类型为E的子元素

  E:nth-last-of-type(n):匹配父元素的倒数第n个类型为E的子元素(与上一项顺序相反)

  E:first-of-type:匹配父元素的第一个类型为E的子元素

  E:last-child:匹配元素类型为E且是父元素的最后一个子元素

  E:last-of-type:匹配父元素的最后一个类型为E的子元素

  E:only-child:匹配元素类型为E且是父元素中唯一的子元素

  E:only-of-type:匹配父元素中唯一子元素是E的子元素

  E:empty:匹配不包含子节点(包括文本)的E元素

CSS3实战之新增的选择器的更多相关文章

  1. CSS3新增的选择器和属性

    <!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...

  2. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.

    笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...

  3. CSS3实战开发 表单发光特效实战开发

    首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...

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

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

  5. CSS3实战手册(第3版)(影印版)

    <CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...

  6. CSS3实战开发:使用CSS3实现photoshop的过滤效果

    原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...

  7. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  8. CSS3实战开发: 折角效果实战开发

    <!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name ...

  9. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

随机推荐

  1. Kinect For Windows V2开发日志六:人体的轮廓的表示

    Kinect中带了一种数据源,叫做BodyIndex,简单来说就是它利用深度摄像头识别出最多6个人体,并且用数据将属于人体的部分标记,将人体和背景区别开来.利用这一特性,就可以在环境中显示出人体的轮廓 ...

  2. 【Warshall_Floyd】

    模板: /* Problem: 任意两点间的最短路 Tips : 可以处理边时负数的情况. 判断图中是否有负圈,只需检查d[i][j]是负数的顶点i就可以. 复杂度 : O(n^3) */ #incl ...

  3. Linux 内核模块可选信号

    一 . 内核模块可选信号 1 . 模块申明 (1). MODULE_LICENSE(遵守的协议) 申明该模块遵守的许可证协议,如:“GPL”."GPL V2" (2). MODUL ...

  4. iOS UILable高度自适应

    适用于iOS6以后 NSString *tip = @"UILable高度自适应,UILable高度自适应,UILable高度自适应"; UILabel label_2 = [[U ...

  5. iOS开发那些事-iOS应用本地化-文本信息本地化

    文本信息本地化在本地化工作中占有很大的比例.包括了:应用名称本地化.系统按钮和信息本地化,以及静态文本信息本地化. 系统按钮和信息本地化 还记得天气预报应用背后的“完成”按钮吗,它在中文环境下是“完成 ...

  6. PHP 布尔类型

    PHP 布尔类型 布尔类型 这是最简单的类型.boolean 表达了真值,可以为 TRUE 或 FALSE. Note: 布尔类型是 PHP 4 引进的. 语法 要指定一个布尔值,使用关键字 TRUE ...

  7. ajax学习计划

    来自http://segmentfault.com/a/1190000004322487?utm_source=Weibo&utm_medium=shareLink&utm_campa ...

  8. js 引用类型比较

    看到别人提的一个问题,说为什么,他们是fasle 然后自己也测试了一番觉得应该是这样的, var a=[1,2,3,4]; var b=a; var c=[1,2,3,4]; if(a==b){ al ...

  9. 使用notepad++编辑器

    使用notepad++编辑器 在公司时经常要用到文本编辑器去写jsp文件,之前使用的是sublime text 3,但是觉得不太顺手,于是转用notepad++编辑器. 这个编辑器最吸引我的地方是层次 ...

  10. 《C++Primer中文版》读书笔记——第1章 开始

    istream对象:cin(标准输入对象); ostream对象:cout(标准输出对象) cerr(输出错误和警告) clog(输出一般性信息) 读取数量不定的输入数据,eg , sum=; whi ...