CSS3
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
浏览器内核以及其前缀
CSS标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所以会加厂商前缀加以区分。如果某个属性已经从草案变为了或接近推荐方案，并且厂商已经完全实现了推荐属性，那就不用加厂商前缀。如border-radius已经很成熟，不用加前缀。
什么是浏览器内核
所谓浏览器内核就是指浏览器最重要或者说核心的部分"Rendering Engine"，译为"渲染引擎"。负责对网页语法的解析，比如HTML、JavaScript，并渲染到网页上。所以浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定这浏览器如何显示页面的内容和页面的格式信息。不同的浏览器内核对语法的解释也不相同，因此同一的网页在不同内核的浏览器显示的效果也会有差异。这也就是网页编写者在不同内核的浏览器中测试网页显示效果的原因。
根据不同的浏览器内核，css前缀会有不同。最基本的浏览器内核有如下四种，其它的内核都是基于此四种进行再研发的。
-
Gecko内核 前缀为-moz- 火狐浏览器
-
Webkit内核 前缀为-webkit- 也叫谷歌内核，chrome浏览器最先开发使用，safari浏览器也使用该内核。国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。
3 .Trident内核 前缀为-ms- 也称IE内核
- Presto内核 前缀-o- 目前只有opera采用
在大多数情况下，当你需要使用CSS3规范中的属性且需要使用一个前缀的时候，针对所使用的浏览器，添加上面的前缀就可以了。例如：如果想要添加一个CSS过渡效果，使用transition属性，并且先添加如下前缀:
-webkit-transition:background 0.5s ease;
-moz-transition:background 0.5s ease;
-o-transition:background 0.5s ease;
transition:background 0.5s ease;
用户的浏览器将会对它所理解的过渡功能版本做出响应，而忽略其他的版本。目前浏览器厂商对于全面实现所有的CSS3功能竭尽全力，并且对于大多数现代浏览器来说，需要添加前缀的属性的数目正在快速减少。
对于那些功能需要添加前缀，可以浏览: http://shouldiprefix.com/
处理添加前缀可以使用插件(autoprefix),有时候需要在css中进行编写
CSS3新增
选择器
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
子代选择器
div > p 选择 div的子元素p标签(必须是亲儿子,不隔代)
紧邻兄弟选择器
+ 选择下一个(紧挨着的)符合条件的兄弟元素
通用兄弟选择器
~ 选择后边所有符合条件的兄弟元素
属性选择器
通过属性来选择元素
E[attr] 选择包含attr属性的所有元素
E[attr=mydemo] 选择属性attr的值等于mydemo字符的所有元素
E[attr*=mydemo] 选择属性attr的值任意位置包含mydemo字符的所有元素
E[attr^=mydemo] 选择属性attr的值开始位置包含mydemo字符的所有元素
E[attr$=mydemo] 选择属性attr的值结束位置包含mydemo字符的所有元素
示例:
<style>
*{
margin: 0;
padding: 0;
}
p[title]{
color: red;
}
p[title="hello"]{
color: green;
}
p[class*=e]{
color: orange;
}
p[class$=o]{
color: #0000FF;
}
p[class^=w]{
color: purple;
}
p[data-name]{
font-size: 25px;
}
</style>
<body>
<p title="hello">今天天气真好啊</p>
<p title="nice">今天天气真好啊</p>
<p class="word">今天天气真好啊</p>
<p class="text">今天天气真好啊</p>
<p class="texa">今天天气真好啊</p>
<p class="ao">今天天气真好啊</p>
<p data-name="today">今天天气真好啊</p>
</body>
伪类选择器
除了以前学过的
:link 链接未被访问时
:active 链接点击时(一瞬间)
:visited 链接访问后
:hover 鼠标悬浮时
CSS3又新增了其它的伪类选择器
表单相关伪类
:checked 匹配被选中的选项
:focus 匹配获焦的输入框
结构伪类
重点通过E来确定元素的父元素。
E:first-child 第一个子元素
E:last-child 最后一个子元素
E:nth-child(n) 第n个子元素
E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算
注意
- n是支持简单表达式的
- n 是从1开始的自然数 E:nth-child(0) 无效
- 最好子元素是同样的元素
目标伪类
E:target 结合锚点进行使用，处于当前锚点的元素会被选中
<style>
li:target{
font-size: 30px;
color: blue;
}
<style>
<body>
<a href="#li3">点我</a>
<li id="li3">li3</li>
</body>
伪元素
E::before、E::after 默认行内元素 content 属性必须写
E::first-letter文本的第一个字母或字
E::first-line 文本第一行
E::selection 被选中的文本
":" 与 “::” 用于区分伪类和伪元素