一、基本选择器

通配选择器：*

元素选择器：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

http://selectivizr.com/

页面中使用

<!--[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选择器、低版本解决方案及各浏览器私有前缀的更多相关文章

  1. 4. CSS新特性之浏览器私有前缀

    1. 浏览器私有前缀 浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无需添加 -moz-:代表firefox浏览器私有属性 -ms-:代表ie浏览器私有属性 -webkit-:代表safar ...

  2. angularjs1+requirejs+ bootstrap+ jQuery低版本配合兼容ie8+浏览器

    angularjs兼容低版本IE浏览器(IE8)angularjs在1.3之后的版本都是选择放弃对IE8及更低IE版本的支持,但是就目前的开发形式来看,IE8的使用客户还是蛮多的,最近有个项目要求尽量 ...

  3. position:fixed 兼容浏览器低版本

    项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...

  4. 使用VS2017开发APP中使用VUE.js开发遇到打包出来的android文件 在低版本的android（4.3）中无法正常使用

    使用VS2017开发VUE的APP应用遇到的问题集合 1,  打包出来的apk文件在Android 6.0版本以上手机可以正常打开,在Android 4.3版本手机上无法打开 原因:一开始猜测是不是V ...

  5. HTML中的IE条件注释，让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案

    最近的项目中,因为需要兼容IE7,IE8,IE9,解研究了IE的条件注释,顺手写下来备忘.  HTML中的IE条件注释 IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解. ...

  6. 让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案

    现在我们可以选择浏览器非常多,所以浏览器的环境也是种类繁多,同一个浏览器也是包含各种不同的版本,不同的版本之间的渲染方法也存在差异,,它们支持的 HTML5.CSS3 特性恐怕也不尽相同.这种情况于是 ...

  7. Vue2+Webpack+ES6 兼容低版本浏览器（IE9）解决方案

    Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...

  8. React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案

    虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不 ...

  9. 兼容低版本IE浏览器的一些心得体会（持续更新）

    前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...

随机推荐

  1. 【BZOJ】1202: [HNOI2005]狡猾的商人

    [题意]w组数据,给定n和m,给出m段区间[s,t](1<=s<=t<=n)的数字和,求是否矛盾.n<100,m<1000,w<100. [算法]带权并查集 [题解 ...

  2. HTML语意化

    1.什么是HTML语义化? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读.写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析.  2.为什么要语义化? 为了在没有CSS ...

  3. 64_l2

    libcec-devel-4.0.2-3.fc26.x86_64.rpm 22-May-2017 22:13 27942 libcephfs-devel-10.2.7-2.fc26.i686.rpm ...

  4. 64_d2

    dtc-1.4.4-2.fc26.x86_64.rpm 20-Jun-2017 11:04 89890 dtdinst-20131210-7.fc26.noarch.rpm 11-Feb-2017 0 ...

  5. 【玲珑杯Round17】xjb总结

    zcy真是垃圾,啥都不会的那种. 菜的不行. 这场手速上了三题,然后各种E被卡…… 日个吗居然E不开栈,傻逼吧 有毒吧 来看题: A.sqc给的我的神奇公式,gtmd居然能A? #include< ...

  6. 【UOJ#164】清华集训2015V

    QwQzcysky真是菜死了,这是我刚上高一的时候坤爷在夏令营讲的,可是今天才切掉…… 想想也神奇,一个2016.11才学会线段树的菜鸡,夏令营的时候居然听过Segment-Tree-Beats? 所 ...

  7. 2017多校第9场 HDU 6162 Ch’s gift 树剖加主席树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6162 题意:给出一棵树的链接方法,每个点都有一个数字,询问U->V节点经过所有路径中l < ...

  8. Mac下使用brew搭建PHP7+nginx+mysql开发环境

    http://blog.csdn.net/mysteryhaohao/article/details/52230634 HomeBrew brew的安装,直接上官网:http://brew.sh/ 一 ...

  9. 动态计算文本的CGSize

    // 计算文本的size -(CGSize)sizeWithText:(NSString *)text maxSize:(CGSize)maxSize fontSize:(CGFloat)fontSi ...

  10. 理解rest架构

    越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency).高 ...