CSS3选择器、低版本解决方案及各浏览器私有前缀
一、基本选择器
通配选择器：*
元素选择器：div、p…
ID选择器：#id
类选择器：.className
群组选择器：选择器1，选择器2
主流浏览器全部支持
二、层次选择器
后代选择器： div p a
子选择器：div>p
兄弟选择器：p+ul
通用选择器：p~a
通用选择器和兄弟选择器 选中的都是同一层次的兄弟选择器
唯一的区别是兄弟选择器选择的是相邻的第一个兄弟，通用选择器选择的是后面所有的兄第
子选择器、兄弟选择器、通用选择器 ： IE7+支持
三、伪类选择器
1、动态伪类选择器
E:link 匹配的元素定义了超链接没有被访问过
E:visited 匹配元素定义了超链接并被访问过
E:hover 鼠标停留在元素E上
E:active 匹配的元素被激活
E:focus 匹配的元素获得焦点
其中:
E:active、E:focus ： IE8+支持，
E:hover ： IE6只支持链接锚点a:hover
2、目标伪类选择器
E:target 匹配文档的URL中某个标志符的目标元素 如：<a href="#brand"> 用:target 匹配id为brand的元素
IE9+、Opera 9.6+支持
3、语言伪类选择器
E:lang 匹配设置了lang属性的元素，如：<html lang="fr"> 用 :lang(fr){} 匹配
IE8+、Opera 9.2+支持
4、表单伪类选择器
E:checked 匹配所有选中的表单元素
E:enabled 匹配所有可用的表单元素
E:disabled 匹配所有禁用的表单元素
IE9+支持
5、结构伪类选择器
E:first-child 匹配父元素的第一个子元素，同E:nth-child(1)
E:last-child 匹配父元素的最后一个子元素，同E:nth-last-child(1)
E:root 匹配所在文档的根元素
E F:nth-child(n) 匹配父元素的第N个子元素
E F:nth-last-child(n) 匹配父元素倒数的第N个子元素
E F:nth-of-type(n) 匹配父元素内具有指定类型的第n个子元素
E F:nth-last-of-type(n) 匹配父元素内具有指定类型的倒数第n个子元素
E F:first-of-type 匹配父元素内具有指定类型的第一个子元素
E F:last-of-type 匹配父元素内具有指定类型的最后一个子元素 如：div a:last-of-type 父元素div中的最后一个a链接
E:only-child 匹配父元素只包含一个子元素
E F:only-of-type 匹配父元素只包含一个同类型的子元素
E:empty 匹配没有子元素的元素，并且该元素不包含任何的文本节点
IE9+支持
其中的参数n，可以是整数（1、2、3），关键字（odd、even），公式（2n+1）
参数n为具体数值时，n始终从1开始计算
参数n为公式时，n从0开始计算
参数为关键字时，odd选择基数，even选择偶数
6、否定伪类选择器
E:not(F) 匹配所有除元素F外的E元素
IE9+支持
7、伪元素
::first-letter 用来选择文本块的第一个字母
::first-line 用来选择文本块的第一行文本
::before 指额外插入内容的位置（之前）
::after 指额外插入内容的位置（之后），一般配合content使用
::selection 匹配突出显示的文本
IE6～8 只支持单冒号的写法，其他浏览器单双冒号都支持
::selection ： IE9+，火狐需要增加私有属性“-moz”,另外该伪元素只接受两个属性：background、color
四、属性选择器
如：title=“aalink bblink”
[attr] 用于选取带有指定属性的元素。 [title]选取所有带title属性的元素
[attr=val] 用于选取带有指定属性和值的元素，这个值必须是全部的。 [title=“aalink bblink”]
[attr~=val] 用于选取属性值中包含指定词汇的元素。这个词汇必须是完整的单词 [title~="aalink”]选取属性中有aalink单词的具有title属性的元素
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 [title|="aa”]选取所有以aa或者aa-开头的具有title属性的元素
[attribute^=value] 匹配属性值以指定值开头的每个元素。 [title^="aa”]选取所有以aa开头的具有title属性的元素
[attribute$=value] 匹配属性值以指定值结尾的每个元素。 [title$="link”]选取所有以link结尾的具有title属性的元素
[attribute*=value] 匹配属性值中包含指定值的每个元素。 [title*="aal”]选取属性中有aal字母的具有title属性的元素
IE7+支持
五、IE低版本解决方案
1、使用Selectivizr
页面中使用
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
2、使用IE7-js
http://dean.edwards.name/ie7/overview/
下载：https://code.google.com/p/ie7-js/downloads/list
页面中使用
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">IE7_PNG_SUFFIX=".png";</script>
<![endif]-->
六、各浏览器私有前缀
Firefox ： -moz-
opera ：-o-
IE ： -ms-
Chrome ： -webkit-
CSS3选择器、低版本解决方案及各浏览器私有前缀的更多相关文章
- 4. CSS新特性之浏览器私有前缀
1. 浏览器私有前缀 浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无需添加 -moz-:代表firefox浏览器私有属性 -ms-:代表ie浏览器私有属性 -webkit-:代表safar ...
- angularjs1+requirejs+ bootstrap+ jQuery低版本配合兼容ie8+浏览器
angularjs兼容低版本IE浏览器(IE8)angularjs在1.3之后的版本都是选择放弃对IE8及更低IE版本的支持,但是就目前的开发形式来看,IE8的使用客户还是蛮多的,最近有个项目要求尽量 ...
- position:fixed 兼容浏览器低版本
项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...
- 使用VS2017开发APP中使用VUE.js开发遇到打包出来的android文件 在低版本的android（4.3）中无法正常使用
使用VS2017开发VUE的APP应用遇到的问题集合 1, 打包出来的apk文件在Android 6.0版本以上手机可以正常打开,在Android 4.3版本手机上无法打开 原因:一开始猜测是不是V ...
- HTML中的IE条件注释，让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案
最近的项目中,因为需要兼容IE7,IE8,IE9,解研究了IE的条件注释,顺手写下来备忘. HTML中的IE条件注释 IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解. ...
- 让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案
现在我们可以选择浏览器非常多,所以浏览器的环境也是种类繁多,同一个浏览器也是包含各种不同的版本,不同的版本之间的渲染方法也存在差异,,它们支持的 HTML5.CSS3 特性恐怕也不尽相同.这种情况于是 ...
- Vue2+Webpack+ES6 兼容低版本浏览器（IE9）解决方案
Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...
- React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案
虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不 ...
- 兼容低版本IE浏览器的一些心得体会（持续更新）
前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...
随机推荐
- Bzoj4481 [Jsoi2015]非诚勿扰
Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 147 Solved: 75 Description [故事背景] JYY赶上了互联网创业的大潮,为非 ...
- bzoj 4552: [Tjoi2016&Heoi2016]排序——二分+线段树
Description 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题 ,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这 ...
- 深入理解Spring MVC（山东数漫江湖）
初始工程 使用Spring Boot和web,thymeleaf的starter来设置初始工程.xml配置如下: <parent> <groupId>org.springf ...
- 【洛谷 P4051】 [JSOI2007]字符加密（后缀数组）
题目链接 两眼题.. 第一眼裸SA 第二眼要复制一倍再跑SA. 一遍过.. #include <cstdio> #include <cstring> #include < ...
- WinRAR分割超大文件
在自己的硬盘上有一个比较大的文件,想把它从网上通过E-Mail发送给朋友时,却发现对方的收信服务器不能够支持那么大的文件……,这时即使用ZIP等压缩软件也无济于事,因为该文件本身已经被压缩过了.于是许 ...
- hdu 4190 Distributing Ballot Boxes(贪心+二分查找)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4190 Distributing Ballot Boxes Time Limit: 20000/1000 ...
- C++之初始化问题
首先,我们应该明确的是在C++中初始化不是赋值,因为初始化是必要的,如果读取了未初始化的值将会导致不明确的行为.初始化指创建变量并且给它赋初值,而赋值则是擦除对象的当前值并用新值代替.C++支持两种初 ...
- Linux汇编教程01: 基本知识
在我们开始学习Linux汇编之前,需要简单的了解一下计算机的体系结构.我们不需要特别深入的了解,理解了一些基本概念对与我们理解程序会很有帮助.现在计算机的结构体系都是采用冯诺依曼体系结构的基础上发展过 ...
- Linux 入门记录：二十、Linux 包管理工具 YUM
一.YUM(Yellowdog Updater, Modified) 1. YUM 简介 RPM 软件包形式管理软件虽然方便,但是需要手动解决软件包的依赖问题.很多时候安装一个软件首先需要安装 1 个 ...
- ogre3d环境配置 SDK安装配置及简单事例教程
ogre3d环境配置 SDK安装配置及简单事例教程 http://www.cr173.com/html/22594_1.html ogre3d环境配置 SDK安装配置及简单事例教程 http://ww ...