front-end CSS3新增特性

CSS3现状

• 新增的CSS3有兼容性问题，IE9+才支持
• 移动端支持度优于PC端
• 不断改进中，应用相对广泛

CSS3 新增属性选择器

属性选择器

权重：属性选择器，类名选择器，伪类选择器，都为10

// 表示有value属性的input元素，如果还有一个input但是没写value，那么就不会被选择
input[value]{
	color: pink;
}
//下面这个权重为11，div=1,属性选择器10
div[class^="icon"] {}

结构伪类选择器

代码应用如下：
nth-child(n)可以实现隔行变色，其中，n可以是数字，公式，关键字。
n的关键字：even（偶数），odd（奇数）
n的公式如下，其中，n是从0开始，每次累加1，2n等价于偶数

ul li:first-child {}
ul li:last-child {}

// nth-child可以选择一个或多个孩子
ul li:nth-child(3) {}
ul li:nth-child(even) {}
//下面相当于选择了所有的孩子
ul li:nth-child(n) {}

区分nth-child(n)和nth-of-type(n):
nth-child(n)，举个例子：
nth-child会把所有的子元素排序，然后先看nth-child(1)，再看是不是div。如果第一个子元素不是div，那么就无法匹配上，就是导致这个选择器啥也没有选上。
而div:nth-of-type(1)会先找出所有的div，然后进行排序，再找出第一个div。

<style>
section div:nth-child(1) {}
section div:nth-of-type(1) {}
</style>
<section>
	<p>第一个孩子</p>
	<div>第二个孩子</div>
	<div>第三个孩子</div>
</section>

小结：

伪元素选择器

利用CSS创建标签或者元素：

::before{}
::after{}

before和after是用在父盒子身上，并且是放在父盒子的里面。

注意是行内元素，所以设置width和height是没有作用的。另外，这2个伪元素选择器中必须带有content属性。

伪元素的使用场景：

1. 使用::after来插入字体图标iconfont

div::after{
	font-family: "icomoon";
	content: "\e921";
}

2. 实现半透明的黑色遮罩层
   里面有个鼠标经过时就显示黑色遮罩层，代码是这样的：
   
3. 伪元素清除浮动
   
   

CSS3新增盒子模型

给某个div设置了width和height，但是如果增加border和padding会让这个div变大，现在可以通过box-sizing来指定盒子模型

box-sizing: content-box | border-box;
content-box就是默认的，以前的那种计算方式，width是content的大小
border-box就是整体大小为设置的width和height，设置border和padding就不会撑大盒子

所以，会出现这样的写法：

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

CSS3 其它特性（了解）

CSS3滤镜属性

计算盒子宽度

需求：子盒子永远比父盒子的宽度小80像素：

width: calc(100% - 80px);

括号里面可以写加减乘除，但是记得在计算符号前后打个空格。

本文中全部图片来源于B站pink老师，侵删