1.新增的选择器
1.1属性选择器：可以根据元素特定属性来选择元素
（1）利用属性选择器可以不用借助于类或者id选择器，注意是中括号[ ].
（2重点）属性选择器还可以选择属性=值的某些元素
input[type=text]
（3）属性选择器还可以选择属性值开头的某些元素。开头符号^=
input[class^=icon]
（4）属性选择器还可以选择属性值结尾的某些元素。结尾符号$=
注意：类选择器，属性选择器，伪类选择器的权重都是10。
1.3结构伪类选择器
主要是根据文档结构来选择器元素,常用于选择父级选择器里面的子元素
注意：（1）如果是无序列表，用nth-shild更多。（2）类选择器，属性选择器，为类选择器权重为10.（3）要记住常用的公式
1.3.1E:first-child（匹配父元素中的第一个子元素E）E:last-child（匹配父元素中最后一个E元素）
E:nth-child(n)（匹配父元素里的第n个元素）
nth-child（n）中n的用处
（1）n可以是数字，关键字和公式（2）n如果是数字，就是选择第n个子元素，里面数字从1开始（3）n可以是关键字：even偶数，odd奇数。
(4)n可以是公式：
常见的公式如下（1）如果n是公式，则从0开始计算，但是第0个或者超出了元素的个数会被忽略
（2）2n代表偶数。（3）2n+1代表奇数 （4）5n代表是5的倍数
（5）n+5从第五个开始（包含第五个） （6）-n+5前五个，包含第五个
1.3.2
first-of-type（第一个）last-of-type（第二个）nth-of-type（n）选择第几个
nth-child与nth-of-type的区别：
nth-child执行时对父元素里面所有孩子进行排序（序号是固定的），先找到第n个孩子，然后看看是否和E（属性选择器）。
nth-of-type执行时先看属性选择器，之后看nth-of-type。
1.4伪元素选择器
可以利用CSS创建新标签，而不需要HTML标签，从而简化HTML
例： ::before (在元素的前面插入内容) ::after（在元素的后面插入内容）
注意：（1）before和after创建一个元素，但是是属于行内元素（2）新创建的这个元素在文档树中是找不到的，所以称为伪元素（3）语法：element::before（） （4）before和after必须有content属性 （5）before在父元素内容的前面创建元素，after在父元素后面插入元素
是
通过伪元素选择器添加一个盒子，清除浮动：
代码一：
.clearfix: after{
content: "";
display:block;（插入的元素必须是块级）
height: 0;（不要看见这个元素）
clear:both;（核心代码清除浮动）
visibility: hidden;（不要看见这个元素） }
代码二：
.clearfix: before,.clearfix:after{
content:"";
display: table;（转换为块级元素并且在一行显示）
}
.clearfix:after{
clear: both;
}
1.4CSS3盒子模型
CSS3可以通过box-sizing来制定盒子模型，有两个值，即可以指定为content-box、border-box，这样我们计算盒子大小的方式就发上了改变。
（1）box-sizing;content-box盒子大小为width+padding+border（以前默认的）
（2）box-sizing：border-box盒子大小为width（前提是padding和border不会超过width宽度）
1.5CSS3的其它特性（了解）
1.CSS3滤镜filter
filter：函数（） filter：blur（5px） blur模糊处理 数值越大越模糊
2.CSS calc函数
calc（）此CSS函数让你在声明CSS属性值时执行一些计算
width： calc（100%-80px）；可以通过+，—，*，/来算
1.6CSS3属性过渡
过渡动画：可以从一个状态过渡到领一个状态
transition:要过渡的属性 花费时间 运动曲线 何时开始 （谁做过渡给谁加）
（1）运动曲线：默认是ease（可以省略）
（2）何时开始： 单位是 秒，可以设置延迟出发时间 默认是0s
（3）过度的属性： 如果想让所有的属性都变化，给一个（all）即可
精彩内容
您阅读本篇文章共花了：
发表评论