用的比较少 看到知道怎么回事就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. 《UNIX环境高级编程》学习心得 四 文件I/O(一)

    这里说的文件I/O是相对标准I/O来说的.主要介绍在UNIX系统中常用的五个文件I/O函数:open.read.write.lseek.以及close. 一.open和opennat #include ...

  2. 常用 CSS 中文字体 Unicode 编码表

    为什么要在CSS中设置字体用字体 Unicode 编码 在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误. 为此,在 CSS直接使 ...

  3. hdu-5700 区间交(二分+树状数组)

    题目链接: 区间交 Problem Description   小A有一个含有n个非负整数的数列与mm个区间.每个区间可以表示为l​i​​,r​i​​. 它想选择其中k个区间, 使得这些区间的交的那些 ...

  4. itunes connect提交app教程

    .打开itunes connect登陆之后,选择Manage Your Apps,再选Add New App: .填写项目相关信息,不知道怎么填的点击问号查看: Bundle ID Suffix需要和 ...

  5. Understand

    快捷键: Ctrl+Shift+H 折叠 Ctrl+Alt+F 替换

  6. jQuery滚动时动态加载页面内容

    var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250 ...

  7. 学习Slim Framework for PHP v3 (三)

    继续上一篇的问题,如何动态的添加不同的Module.添加Module是给Middleware用的,用于调用Module的写日志方法.上篇中的写法是在app->add(mv),这时的middlew ...

  8. 番外篇 之 C#委托

    对于上一节 番外篇之C#多线程的反思 反思一:   Thread th = new Thread(参数); ////参数的总结 ////首先,第一情况,对于 Thread th = new Threa ...

  9. UI3_UILabel

    // // AppDelegate.m // UI3_UILabel // // Created by zhangxueming on 15/6/29. // Copyright (c) 2015年 ...

  10. Eclipse的常用快捷方式

    在开发中,常用的一些快捷方式 alt+shift+r 修改方法名,变量名,关键体会enter                 ctrl+shift+c 先选中n行,注释                 ...