抱歉，您的浏览器无法访问本站

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

CSS3介绍

CSS3在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

CSS3的现状

• 浏览器支持程度不够好，有些需要添加私有前缀

• 移动端支持优于PC端

• 不断改进中

• 应用相对广泛

应对的策略：渐进增强

• （1）坚持渐进增强的原则：让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好。【重要】

比如说，同样是一个头像，可能在低版本的浏览器中，头像方的；在高版本的浏览器中，头像是圆的。

• （2）考虑用户群体。

• （3）遵照产品的方案。

参考链接：

• 渐进增强 VS 优雅降级 | 简书

• 渐进增强和优雅降级之间的不同（面试题目）

浏览器的版本问题

由于CSS3普遍存在兼容性问题，为了避免因兼容性带来的干扰，浏览器的建议版本为：

• Chrome浏览器 version 46+

• Firefox浏览器 firefox 42+

如何使用手册

CSS参考手册的网址：http://css.doyoe.com/

CSS参考手册的下载链接：http://download.csdn.net/download/smyhvae/10243974

在查看CSS参考手册时，需要注意以下符号：

比如说，{1,4}表示可以设置一至四个参数。

下面讲CSS3的基础知识。本文讲一下 CSS3 选择器的内容。

CSS3 选择器

我们之前学过 CSS 的选择器，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

div 标签选择器

.box 类名选择器

#box　id选择器

div p 后代选择器

div.box 交集选择器

div,p,span 并集选择器

div>p 子代选择器

* : 通配符

div+p: 选中div后面相邻的第一个p

div~p: 选中的div后面所有的p

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与 jQuery 中所提供的绝大部分选择器兼容。

属性选择器

属性选择器的标志性符号是 []。

匹配含义：

1

^：开头  $：结尾  *：包含

格式：

• E[title] 选中页面的E元素，并且E存在 title 属性即可。

• E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。

• E[att