大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
github：https://github.com/Daotin/Web
微信公众号：Web前端之巅
博客园：
CSDN：https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、CSS3 1、CSS3简介CSS3是CSS（层叠样式表）技术的升级版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
2、新增特性CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。
3、优势减少开发成本与维护成本
在CSS3出现之前，开发人员为了实现一个圆角效果，往往需要添加额外的HTML标签，使用一个或多个图片来完成，而使用CSS3只需要一个标签，利用CSS3中的border-radius属性就能完成。
提高页面性能
很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”，换句话说，在进行Web开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。
4、兼容问题浏览器对于CSS3的支持程度比较低，有的时候不同的浏览器需要添加不同的前缀。
Chrome（谷歌浏览器）：-webkit-
Safari（苹果浏览器）：-webkit-
Firefox（火狐浏览器）：-moz-
lE（IE浏览器）：-ms-
Opera（欧朋浏览器）：-o-
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
1、属性选择器所谓属性选择器就是根据指定名称的属性的值来查找元素。
1、E[attr]：查找指定的拥有attr属性的E标签。
/*查找拥有style属性的里标签*/ li[style] {}2、E[attr=value]：查找拥有指定的attr属性并且属性值为value的E标签。
/*查找拥有class属性并且值为Red的li标签*/ li[class=red] {}3、E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签
li[class*=red] {}4、E[attr^=value]：查找拥有指定的attr属性并且属性值以value开头的E标签
li[class^=red] {}5、E[attr$=value]：查找拥有指定的attr属性并且属性值以value开结束的E标签
li[class$=red] {} 2、伪类选择器之前学过的伪类选择器：a:hover，a:link， a:active， a:visited
伪类选择器：以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。
2.1、兄弟结构伪类+：获取当前元素的相邻的满足条件的元素
~：获取当前元素的满足条件的兄弟元素
2.2.1、查找第一个元素和最后一个元素（无过滤）
E:first-child：查找E元素的父级元素中的第一个E元素。
E:last-child ：查找E元素的父元素中最后一个指定类型的子元素
/*下面这句样式查找：li的父元素中的第一个li元素 1.相对于当前指定元素的父元素 2.查找的类型必须是指定的类型*/ li:first-child{ color: red; } li:last-child{ background-color: skyblue; }注意：在查找的时候并不会限制查找的元素的类型，也就是如果第一个元素不是E元素的话，就查找不到，查找的时候不会过滤掉E元素之外的元素。
2.2.2、查找第一个元素和最后一个元素（有过滤）
E:first-of-type：查找E元素的父级元素中的第一个E元素。
E:last-of-type ：查找E元素的父元素中最后一个指定类型的子元素
/*查找的时候限制类型 first-of-type*/ /*1.也是相对于父元素 2.在查找的时候只会查找满足类型条件的元素，过渡掉其它类型的元素*/ li:first-of-type{ color: red; } li:last-of-type{ color: orange; }2.2.3、查找单个元素或多个元素（无过滤）
E:nth-child(index)：查找指定索引位置的元素（从1开始的索引）
E:nth-child(even)：查找索引为偶数位置的元素
E:nth-child(odd)：查找索引为奇数位置的元素
与上面类似，下面是倒着计算的：
E:nth-last-child(xxx)
li:nth-child(5){ background-color: lightblue; } li:nth-child(even){ background-color: blue; } li:nth-child(odd){ background-color: red; }2.2.4、查找单个元素或多个元素（有过滤）
li:nth-of-type(even){ background-color: orange; } li:nth-of-type(odd){ background-color: pink; }2.2.5、查找开头或结尾的多个元素
无过滤：E:nth-child(n) ：n 遵循线性变化，其取值0、1、2、3、4、... 但是当参数小于等于0时，选取无效。
有过滤：E:nth-of-type(n)
无过滤倒序：E:nth-last-child(n)
有过滤倒序：E:nth-last-of-type(n)