CSS3 浏览器前缀

浏览器样式前缀

为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器

-moz- 兼容firefox

-o- 兼容opera

-webkit- 兼容chrome 和 safari

比如：

div
{ 
 -ms-transform: rotate(30deg); 
 -webkit-transform: rotate(30deg); 
 -o-transform: rotate(30deg); 
 -moz-transform: rotate(30deg); 
 transform: rotate(30deg);
}

自动添加浏览器前缀

目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer

可以在Sublime text中通过package control 安装 autoprefixer

Autoprefixer在Sublime text中的设置：

1、preferences/key Bindings-User

{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }

2、Preferences>package setting>AutoPrefixer>Setting-User

{
 "browsers": ["last 7 versions"],
 "cascade": true,
 "remove": true
}

last 7 versions：最新的浏览器的7个版本

cascade：缩进美化属性值

remove：是否去掉不必要的前缀

CSS3新增选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

<style type="text/css"> 
 .list div:nth-child(2){
 background-color:red;
 }
</style>
......
<div class="list">
 <h2>1</h2>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
</div>
<!-- 第2个子元素div匹配 -->

2、E:first-child：匹配元素类型为E且是父元素的第一个子元素

3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素

4、E > F E元素下面第一层子集

5、E ~ F E元素后面的兄弟元素

6、E + F 紧挨着的后面的兄弟元素

属性选择器：

1、E[attr] 含有attr属性的元素

<style type="text/css">
 div[data-attr='ok']{
 color:red;
 }
</style>
......
<div data-attr="ok">这是一个div元素</div>

2、E[attr=‘ok’] 含有attr属性的元素且它的值为“ok”

3、E[attr^=‘ok’] 含有attr属性的元素且它的值的开头含有“ok”

4、E[attr$=‘ok’] 含有attr属性的元素且它的值的结尾含有“ok”

5、E[attr*=‘ok’] 含有attr属性的元素且它的值中含有“ok”