CSS3——新特性

目录

CSS3新特性

新增选择器

属性选择器

结构伪类选择器

伪元素选择器

盒子模型

其他特性

---

CSS3新特性

兼容性问题，IE9+支持

移动端支持优于PC端

新增选择器

属性选择器

根据元素特定的属性来选择元素

权重是（0，0，1，0）

选择器	示例	描述
元素标签[属性]	input[name]	选择具有name属性的input元素
元素标签[属性="属性值"]	input[type=text]	选择具有type属性且属性值为text的input元素
元素标签[属性^="属性值"]	div[class^=pc]	匹配具有class属性且值以pc开头的div元素
元素标签[属性$="属性值"]	p[class$=pc]	匹配具有class属性且值以pc结尾的p元素
元素标签[属性*=“属性值”]	div[class*=pc]	匹配具有class属性且值中含有pc的div元素

结构伪类选择器

根据文档结构来选择元素，常用于根据父级选择里面的子元素。

权重是（0，0，1，0）

选择器	示例	描述
元素标签:first-child	ul li:first-child	匹配父元素中的第一个子元素li
元素标签:last-child	ul li:last-child	匹配父元素中的最后一个子元素li
元素标签:nth-child(n)	ul li:nth-child(n)	匹配父元素中的第n个子元素li (n是数字、关键字或公式（2n、2n+1、n+5、-n+5等）)

和上面的用法类似，但是有区别：

选择器	示例	描述
元素标签:first-of-type	section div:first-of-type	指定类型div的第一个
元素标签:last-of-type	section div:last-of-type	指定类型div的最后一个
元素标签:nth-of-type(n)	section dv:nth-of-type(n)	指定类型div的第n个

 区别：

child会把所有的子元素都排列序号，从1到后，按顺序。排序，按结构先后顺序排序，然后再看看类型是否匹配，匹配则找到，不匹配就找不到。

of-type会把指定的元素类型，按顺序排列。排序先看是否是同一类元素，然后同一类元素里面按先后顺序排序。

伪元素选择器

利用CSS创建标签元素，而不需要HTML标签，从而简化HTML结构

权重是（0，0，0，1）

选择器	示例	描述
::before	element::befroe{}	在元素内部的前面插入内容
::after	element::after{}	在元素内部的后面插入内容

 注意：

before和after创建一个元素，在文档树中找不到，所以称为伪元素。

before和after必须拥有content属性，是内容属性，可以空着也可以写内容

是行内元素

盒子模型

通过box-sizing来指定盒模型，计算盒子大小的方式发生了改变

属性值content-box，默认值，盒子大小=width+padding+border

属性值border-box，盒子大小=width。不会撑大盒子，前提是padding+border不超过width

其他特性

图片变模糊

滤镜filter属性：将模糊或颜色偏移等图像效果应用于元素。

filter: 函数();

例如：filter: blur(5px);//blur模糊处理，数值越大越模糊

计算盒子宽度width

calc函数，里面的计算可以用加减乘除来

例如：width: calc(100% - 80px);//表示，子盒子宽度始终等于，父盒子的宽度-80px