CSS3实战之新增的选择器
用的比较少 看到知道怎么回事就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的选择器中早就包含了,所以就不多说了。
浏览器兼容性:
![]() |
![]() |
![]() |
![]() |
![]() |
|
|
|
|
|
连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实战之新增的选择器的更多相关文章
- CSS3新增的选择器和属性
<!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...
- 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.
笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...
- CSS3实战开发 表单发光特效实战开发
首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...
- CSS3每日一练之选择器-结构性伪类选择器
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...
- CSS3实战手册(第3版)(影印版)
<CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...
- CSS3实战开发:使用CSS3实现photoshop的过滤效果
原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- CSS3实战开发: 折角效果实战开发
<!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
随机推荐
- 无线网络(WLAN)常见加密方式介绍
在使用无线路由器配置wifi安全设定的时候经常会遇到各种加密方式,即不懂意思也不知道如何选择.本文将对此做一个简单的介绍. 1.WEP 有线等效协议(Wired Equivalent Privacy, ...
- Problem:Minesweeper Master
Google code jam Qualification Round 2014 题目链接:https://code.google.com/codejam/contest/dashboard?c=29 ...
- React Native学习-将 'screen', 'window' or a view生成图片
https://github.com/facebook/react-native/commit/ac12f986899d8520527684438f76299675dc0daa 这是react-nat ...
- umbraco使用VS安装
新建——程序包管理器控制台——install - package umbracocms vs中的快捷键: ctrl+F5为调试: ctrl+shift+B生成解决方案: 打包前,App_data文件夹 ...
- uva 12284 直接判断
思路:见代码 #include<iostream> #include<cstring> #include<cstdio> #include<algorithm ...
- IFRAM的详细用法
IFRAM的详细用法: IFRAM的详细用法: <IFRAME>用于设置文本或图形的浮动图文框或容器. BORDER <IFRAME BORDER="3"& ...
- 【转载】Android开发学习笔记:Intent的简介以及属性的详解
http://liangruijun.blog.51cto.com/3061169/634411/ 一.Intent的介绍 Intent的中文意思是“意图,意向”,在Android中提供了Intent ...
- 【转载】Asp.net Mvc 入门视频教程
专辑: http://www.youku.com/playlist_show/id_2416830.html 订阅: http://www.youku.com/playlist/rss/id/2416 ...
- Android实现抽奖转盘
一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...
- CSS之拖拽1
PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化. clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动 到的 ...




