1.CSS3选择器
CSS3是CSS的第三代版本，增加了很多功能，例如：强大的选择器、盒子模型、圆角、渐变、动画、2D/3D转换、文本效果等。
CSS3 和 HTML5 没有任何关系！ 在HTML5骨架中，可以使用CSS2.1或CSS3。 CSS3 样式可以在 XHTML 框架中使用。
在学习 CSS 之前，先学习选择器。 在CSS2中，有class、id、标签选择器等。
CSS3 赋予了强大的选择器。
CSS3并没有颠覆传统的CSS写法，它仍然是：
选择器{
k：v；
k：v；
CSS有一个特点，当遇到不认识的选择器和属性时，它会保持沉默，不报错。
)(*&^){ $%^&*():)*^%$; } div{ width: 100px; fhjkdsahfkjasf:99834y912y492; height: 100px; !@#$%^&*:$%^&*(); background-color: orange; }
1.1 属性选择器
属性选择器与 IE7 兼容。
CSS3中的[]可以选择任意属性。 以下任意属性选择器将使用自定义属性作为示例：
选择器
版本
阐明
[数据信息]
CSS2
检查带有 data-info 属性的标签
[数据信息='val']
CSS2
选择一个 data-info 属性值等于 val 的标签
[数据信息^='val']
CSS3
选择具有 data-info 属性的标签，其值以 val 开头
[数据信息$='val']
CSS3
选择具有 data-info 属性且值以 val 结尾的标签
[数据信息*='val']
CSS3
选择具有 data-info 属性且其值包含 val 的标签
[数据信息|=en]
CSS3
选择具有 data-info 属性且其值以“en-”开头的元素
[数据信息~=你好]
CSS3
选择具有 data-info 属性且其值包含短语“hello”的所有元素。
选择具有 data-info 属性的 div
div[数据信息]{}
选择一个具有 data-info 属性且值为 1 的 div，它完全匹配：
div[数据信息 = "1"]{}
选择具有 data-info 属性并以 h 开头的 div：
div[数据信息 ^= "h"]{}
选择具有 data-info 属性且其值包含短语“haha”的所有元素，并用空格分隔短语
div[数据信息 ~= "哈哈"]{}
匹配破折号开头，选择具有 data-info 属性且值以“haha-”开头的元素
div[数据信息 |= "哈哈"]{}
选择具有值包含“a”的 data-info 属性的所有元素
div[data-info*="a"]{背景：天蓝色;}
您还可以使用 [] 继续多个匹配
[src="img/am.jpg"][alt="梦想"]{border-color:blue;}
<div data-info="1"></div> <div data-info="2"></div> <div data-info="3"></div> <div data-info="h1"></div> <div data-info="h2"></div> <div data-info="h3"></div> <div data-info="a3"></div> <div></div> <div data-info="hahaxixi"></div> <div></div> <div data-info="haha"></div> <div data-info="haha xixi"></div> <div data-info="xixi haha memeda"></div> <div data-info="haha-memeda"></div> <div data-info="woaini haha-memeda"></div> <div></div>
1.2 父序列选择器（结构伪类）
:first-child p:first-child 选择其父元素中的第一个子元素 :last-child p:last-child 选择其父元素中最后一个子元素 :first-of-type p:first-of-type 选择其父元素中的首个<p>元素 :last-of-type p:last-of-type 选择其父元素中的最后<p>元素 :only-of-type p:only-of-type 选择其父元素中唯一的 <p>元素 :only-child p:only-child 选择其父元素中的唯一子元素 :nth-child(n) p:nth-child(2) 选择其父元素中的第二个子元素 :nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始倒着计数。 :nth-of-type(n) p:nth-of-type(2) 选择其父元素第二个 <p> 元素 :nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 :not(selector) :not(p) 排除选择器，选择非 <p> 元素的元素。
<div> <p></p> <p></p> <p></p> <p></p> </div> <div> <h3>h3</h3> <p></p> <p></p> <div> <p></p> <p></p> <p></p> </div> </div>
:first-child() 仅兼容 IE7，其他均兼容 IE9
1.3 nth-of-type 和 nth-child 的参数
注意：nth-child和nth-of-type的参数是一样的，用法也一样，只是有一点小小的区别，nth-of-type可以判断相同的标签。
选择器
阐明
li:第 n 个类型（长度）
参数长度是一个具体的数字，从1开始
li:第 n 个类型(3n)
多重选择器，参数n从0开始估计，匹配第3、6、9…所有3的倍数
li:第 n 个类型(3n+2)
表示从第二个开始，每2选1html伪元素，匹配所有3的倍数
li：第 n 个类型（偶数）
选择所有质数
li：第 n 个类型（奇数）
选择所有质数
二、伪类
在CSS2.1中，只有标签可以下移：a:link、a:hover、a:visited、a:active
2.1：焦点获得焦点
当表单元素具有焦点时，可以通过 :focus 伪类选择它
输入：焦点
2.2 :empty 空标签
当一个标签完全端到端，没有任何空格、制表符、换行符、文本等时，它是：空
<div> </div> <div> </div> <div>我</div>
2.3：勾选选中
单选按钮、复选框，如果选中，则可以通过以下方式选择：选中。
输入：选中{}
2.4 :启用和:禁用
检查启用或禁用的输入元素，IE9兼容。
输入：启用{}
输入：已禁用{}
按钮 1" 禁用>
2.5：目标
:target 选择器用于选择当前活动的目标元素。
p:target 选择当前活动的 p 元素。
<p><a href="#news1">跳转至内容 1</a></p> <p><a href="#news2">跳转至内容 2</a></p> <p id="news1"><b>内容 1...</b></p> <p id="news2"><b>内容 2...</b></p>
3. 伪元素 3.1 伪元素
注意：a:hover 称为伪类，伪元素是伪标签，元素是标签，所以是假标签。
:first-letter 选中某个元素中的文本首字母或第一个文字，IE9开始兼容
:first-line 选中某个元素中的第一行文字，IE9开始兼容
:before 选中某个元素内部的前面插入内容
:after 选中某个元素内部的后面插入内容
::selection 选择被用户选取的文本，IE9开始兼容，Firefox要用::-moz-selection替代
注意：before和after必须写content:""属性，而且必须写无内容，并且生成的元素是内联元素。
3.2 伪元素使用iconfont字体图标
1.下载对应的字体图标或字体库（字体文件）
2.使用CSS3的@font-face属性将字体引入当前页面，并定义字体名称（默认名称为iconfont）
3.在CSS中选择当前元素并使用font-family调用字体图标，同时在content属性中添加代码（代码可以在iconfont.css文件中找到）
四、CSS3疗效 4.1 文本阴影（text-shadow）
text-shadow：水平阴影垂直阴影模糊距离阴影颜色；
文本阴影：无； 取消阴影
文本阴影：-5px -5px 10px 红色，5px 5px 10px 绿色，10px 10px 15px 蓝色；
注意：前两项是必须写的，后两项是可选的。 根据需要填写。 阴影的颜色默认为文本颜色。
1.阴影可以有无数个，每个阴影直接用“逗号”分隔
2.阴影不占位置，与背景类似
4.2 盒子阴影
box-shadow：水平阴影垂直阴影模糊距离阴影大小阴影颜色inner/shadow；
框阴影：0px 0px 20px 30px 红色，20px 25px 20px 30px 绿色；
框阴影：0px 0px 10px 30px 红色插图； 内心的阴影
1.阴影可以有无数个，每个阴影直接用“逗号”分隔
2.阴影不占位置，与背景类似
3.将外阴影改为内阴影，使用inset
4.3 圆角边框
border-radius：水平直径/垂直直径； 一般垂直直径可以省略，默认与水平直径相同。
边框半径：左上、右上、右下、左下；
4.4 溢出隐藏 4.4.1 单行文本溢出隐藏*
p{ width: 300px; border: 1px solid red; /*如何超出隐藏*/ white-space: nowrap;/*文本不允许换行*/ text-overflow: ellipsis;/*文本超出省略号*/ overflow: hidden;/*段落内容超出隐藏*/ } <p>React和Vue的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单,已成为 Web 开发的主流工具。</p>
4.4.2 多行文本溢出隐藏
div{ width: 400px; border: 1px solid red; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;/*第几行开始隐藏*/ overflow: hidden; } <div>绰号“考拉”，北京航空航天大学软件工程硕士，前端开发培训名师。讲课幽默、有激情，学生称他的课堂是“小德云社”，让学生在欢声笑语中把知识学会！考拉老师曾在国内某著名培训机构担任特级讲师、课程研发专员，在北京、上海、广州各地职教，学生众多，优秀学员遍布阿里、腾讯、百度、京东、360、美团等公司。考拉老师的免费教学视频流传也非常广，观看总人数超十万之多。 观看邵山欢老师免费视频>中国最早的web App、PhoneGap、Node.js研究者，为北航诸多创业企业制作移动端项目。想感受名师的魅力，快来爱前端学习吧！</div>
筛选
我们只需要了解过滤器，而不必记住它们。
参考相关文章：
5.渐变背景
CSS3中，渐变分为：线性渐变和径向渐变
切割1px后不再需要平铺背景做渐变，IE9兼容
首先渐变属性是background-image属性，不是background-color
5.1 线性渐变
私有前缀：浏览器供应商将自己的前缀添加到一些仍处于实验性质的 CSS 属性中
-webkit- Chrome 和 Safari 浏览器
-moz- 火狐浏览器
-ms- Internet Explorer
-o- 打开浏览器
语法：
背景：-webkit-线性渐变（角度，颜色1，颜色2，颜色3）
div:nth-of-type(2){ background:-webkit-linear-gradient(top,red,green,blue); background:-moz-linear-gradient(top,red,green,blue); background:-ms-linear-gradient(top,red,green,blue); background:-o-linear-gradient(top,red,green,blue); background:linear-gradient(top,red,green,blue); }
第一个参数，可以写度数，单位是deg，一个圆就是360deg
方向上存在分歧：
方向是：
left、right、top、bottom或angle（90deg），前四个单词可以使用to关键字指定方向html伪元素，所以不需要写前缀。
可以列出多个颜色值，用逗号分隔
背景：线性渐变（红色0%，绿色30%，粉色50%，天蓝色80%，蓝色100%）；
5.2 径向梯度
背景：径向渐变（红、绿、蓝）；
背景：径向渐变（方向，颜色1，颜色2）；
方向是：
left、right、top、bottom或center（默认），无deg角度，不能使用to关键字，必须写前缀。
默认是圆形，可以设置椭圆，ellipse表示椭圆，必须指定宽度和高度
6.背景系列属性6.1background-origin属性
背景原点属性：
背景来源：内容框；
6.2 背景剪辑属性
背景剪裁属性：
背景剪辑：内容框；
border-box：默认值，背景从边框区域向外裁剪，超出的部分将被裁剪
padding-box：背景从padding区域向外裁剪，超出padding的部分将被裁剪
content-box：背景从内容区域向外裁剪，超出内容的部分将被裁剪
6.3 背景大小属性
背景图片规格可修改，兼容IE9。
背景大小：100px 200px；
如果只想设置一个值，而另一个值是手动按比例估计的，那么就写auto：
背景大小：200px 自动；
背景大小：auto200px；
backgrond-size可以使用cover作为值，这意味着图像不会改变形状，并且会呈现尽可能多的图像。 根据图片的长宽比和包的长宽比，有两个区别。 cover 可能无法完全渲染图像：
该值还可以包含，表示图片不会变形，必须呈现完整的图片：
当背景大小用于精灵时，情况会更复杂。 背景尺寸是精灵的整体规格。
6.4 多种背景
一个包可以同时携带多个背景，用冒号分隔。 兼容IE9。
但同一个包只能携带一种背景颜色，可以携带多种背景图片。
background: url(images/0.png) repeat-y,
url(images/shishi.jpg) no-repeat ,
url(images/0.jpg);
按照顺序，如果前面没有空间，可以用前面的图片。
background-position、background-size等属性可以使用冒号来分隔值，表示针对不同的图片设置值。
背景大小：自动自动，600px 100px，自动自动；
七、CSS3过渡
CSS3越来越多的属性支持现代浏览器，可以使用CSS3代替JavaScript来实现动画效果。
过渡：从一种状态逐渐转变为另一种状态的过程。
比如：从黑到白，中间会有一个过渡的蓝色。
Transition属性就是过渡，当元素从CSS状态A转变为CSS状态B时，并不是干巴巴的，而是动画。
对于动画来说，不需要setInterval，可以使用CSS3，transition属性是由浏览器内核中的C++代码实现的，效率比setInterval高很多，而且动画更流畅、更细腻。
7.1 过渡transition属性的基本句型
transition：属性名时间运动形式开始时；
过渡：所有 2s 线性 1s；
过渡：宽度1s，高度2s； 多个属性之间用冒号分隔以进行转换。
第一个参数：要让哪些CSS属性参与过渡，如果要所有属性都参与就写all
第二个参数：是过渡动画的时间，s表示秒，单位必须写
第三个参数：buffer关键字，ease表示速度不均匀，匀速是线性
第四个参数：延迟时间，0s表示不延迟
防范措施：
1.前两个参数必须写，后两个可选
2. 任何想要转换的人都应该将其添加到选择器本身。 不建议将其添加到触发条件中，因为触发条件在离开时没有过渡效果。
3.如果你想认识低版本Chrome浏览器或其他低版本浏览器的人，需要添加前缀：例如：-webkit-transiton
7.2 哪些属性可以转变
基本上所有属性都可以转换：
背景颜色、背景位置、背景图像、边框半径、边框、填充、字体大小等。
无法转换：
渐变色、浮动
特别需要注意的是，jQuery中的animate函数不支持background-color和background-position。 因此，如果想要制作有背景颜色和背景定位的动画，就必须使用CSS3。
7.3 何时触发转换
对元素的任何 CSS 更改都可以触发转换。
不要以为只有 :hover 才能触发转换。 任何导致元素发生变化的因素都会导致过渡。
例如，更改元素的类名可以触发转换。
例如直接用JS设置属性也可以触发转换。
过渡就像一个护身符。 谁敢改我的css样式，肯定是用动画来实现的。 并且动画效率比setInterval要高。
想要实现带transition的动画，迟早会有三天的时间来取代setInterval()原理。
7.4 运动形式
贝塞尔曲线生成：
过渡：所有 2s 三次贝塞尔曲线(0.1, 3.65, 0.74, -0.12)；
您还可以通过浏览器的 CSS 样式调整贝塞尔曲线参数：
