用的比较少 看到知道怎么回事就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. 无线网络(WLAN)常见加密方式介绍

    在使用无线路由器配置wifi安全设定的时候经常会遇到各种加密方式,即不懂意思也不知道如何选择.本文将对此做一个简单的介绍. 1.WEP 有线等效协议(Wired Equivalent Privacy, ...

  2. Problem:Minesweeper Master

    Google code jam Qualification Round 2014 题目链接:https://code.google.com/codejam/contest/dashboard?c=29 ...

  3. React Native学习-将 'screen', 'window' or a view生成图片

    https://github.com/facebook/react-native/commit/ac12f986899d8520527684438f76299675dc0daa 这是react-nat ...

  4. umbraco使用VS安装

    新建——程序包管理器控制台——install - package umbracocms vs中的快捷键: ctrl+F5为调试: ctrl+shift+B生成解决方案: 打包前,App_data文件夹 ...

  5. uva 12284 直接判断

    思路:见代码 #include<iostream> #include<cstring> #include<cstdio> #include<algorithm ...

  6. IFRAM的详细用法

    IFRAM的详细用法:   IFRAM的详细用法:  <IFRAME>用于设置文本或图形的浮动图文框或容器. BORDER <IFRAME BORDER="3"& ...

  7. 【转载】Android开发学习笔记:Intent的简介以及属性的详解

    http://liangruijun.blog.51cto.com/3061169/634411/ 一.Intent的介绍 Intent的中文意思是“意图,意向”,在Android中提供了Intent ...

  8. 【转载】Asp.net Mvc 入门视频教程

    专辑: http://www.youku.com/playlist_show/id_2416830.html 订阅: http://www.youku.com/playlist/rss/id/2416 ...

  9. Android实现抽奖转盘

    一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...

  10. CSS之拖拽1

    PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化. clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动 到的 ...