首页 > 代码库 > CSS3选择器、低版本解决方案及各浏览器私有前缀

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="http://www.mamicode.com/#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="http://www.mamicode.com/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选择器、低版本解决方案及各浏览器私有前缀