CSS3的新特性
CSS3的现状：- 新增的CSS3特性有兼容性问题，ie9+才支持
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
一、CSS3新增的选择器
CSS3新增的选择器： CSS3新增了一些选择器，可以更加便捷，更加*选择目标元素。 1、属性选择器 2、结构伪类选择器 3、伪类选择器1.属性选择器：
语法： E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性且属性值等于val的E元素 E[att^="val"] 匹配具有att属性且值以val开头的E元素 E[att$="val"] 匹配具有att属性且值以val结尾的E元素 E[att*="val"] 匹配具有att属性且值中含有val的E元素优点：
1、利用属性选择器就可以不用借助于类或者id选择器 2、属性选择器还可以选择属性=值的某些元素 （重点） 3、属性选择器可以选择属性值开头的某些元素 4、属性选择器可以选择属性值结尾的某些元素<style>
/* input[value] {
color: aqua;
} */
input[type=text] {
color: blanchedalmond;
}
div[class^="icon"] {
color: blueviolet;
}
section[class$="data"] {
color: brown;
}
</style>
</head>
<body>
<!-- 1、利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- <input type="text" name="" id="" value="请输入用户名">
<input type="text" name="" id=""> -->
<!-- 2、属性选择器还可以选择属性=值的某些元素 （重点） -->
<input type="text">
<input type="password">
<!-- 3、属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>hhhhhh</div>
<!-- 4、属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">1234</section>
<section class="icon2-data">5678</section>
<section class="icon3-ico">345678</section>
</body>
注意：
类选择器、属性选择器、伪类选择器的权重都为10。
2.结构伪类选择器：
结构伪类选择器主要根据文档结构来选择器元素，常用语改呢根据父级选择器里面的子元素
语法：
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中的最后一个子元素E
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个
其中：
nth-child(n)选择某个父元素的一个或多个特定的子元素。
n可以是数字，关键字和公式；
n如果是数字，就是选择第n个子元素，里面数字从1开始..；
n可以是关键字 ：even 偶数，odd 奇数；
n可以是公式：常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)。
公式：
2n 偶数
2n+1 奇数
5n 5的倍数 "5"可以为其他值
n+5 从第5个开始（包含第5个）到最后 "5"可以为其他值
-n+5 前五个（包含第5个） "5"可以为其他值
<style>
/* 1.选择ul里面的第一个孩子 li */
ul li:first-child {
background-color: coral;
}
ul li:last-child {
background-color: cornflowerblue;
}
ul li:nth-child(2) {
background-color: sandybrown;
}
/* 把所有偶数的孩子选出来 */
/* ul li:nth-child(even) {
background-color: sandybrown;
} */
/* 把所有奇数的孩子选出来 */
/* ul li:nth-child(odd) {
background-color: sandybrown;
} */
ul li:nth-child(6) {
background-color: lightgreen;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
</body>
nth-of-type(n)和nth-child(n)的区别：
- nth-child 对父元素里面所有的孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配；
- nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子。
<style>
/* nth-child(n) 从0开始，每次加1，往后面计算 这里边必须是n，不能是其他字母 相当于选择了所有孩子*/
/* ol li:nth-child(n) {
background-color: pink;
} */
/* nth-child(2n)选择了所有的偶数孩子，相当于even */
/* ol li:nth-child(n) {
background-color: pink;
} */
/* nth-child(n+5) 从第5个开始选择一直到最后 */
/* ol li:nth-child(n+5) {
background-color: pink;
} */
/* nth-of-type(n) */
ol li:nth-of-type(even) {
background-color: purple;
}
/* nth-child 会把所有的孩子都排列序号
他在执行的时候首先看nth-child(1)，之后回去看前面的div*/
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 会把指定元素的盒子排列序号
执行的时候首先看：div (指定的元素) 之后回去看 nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1) {
background-color: royalblue;
}
</style>
</head>
<body>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
总结：
- 结构伪类选择器一般用于选择父级里面的第几个孩子；
- nth-child对父元素里面所有的孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是和否和E匹配；
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E，找到第n个孩子；
- 关于nth-child(n)我们要知道n是从0开始计算的，要记住常用公式；
- 如果是无序列表，我们肯定用nth-child多一些；
- 类选择器、属性选择器、伪类选择器的权重都为10。
3.伪元素选择器：
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。 方法： ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容<style>
div {
width: 200px;
height: 200px;
background-color: seagreen;
}
/* div::before 权重是2 */
div::before {
/* 这个content是必须写的 */
content: '佩奇';
}
div::after {
content: 'pig';
}
</style>
</head>
<body>
<div>是</div>
</body>
注意： before和after创建一个元素，但是属于行内元素； 新创建的这个元素在文档树中是找不到的，所以我们成为伪元素； 语法：element::before{} before和after必须有content属性 before在父元素内容的前面创建元素，after在父元素内容的后面插入元素； 伪元素选择器和标签选择器一样，权重为1； 二、CSS3的盒子模型 CSS3中可以通过box-sizing来指定盒模型，有两个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。 可以分成两种情况： 1、box-sizing:content-box 盒子大小为width+padding+border（以前默认的）； 2、box-sizing:border-box 盒子大小为width。 如果盒子模型我们改为了box-sizing:border-box，那padding和border就不会撑大盒子了。（前提是padding和border不会超过width的宽度）
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* CSS3盒子模型 最终大小就是width */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小猪佩奇
</div>
<p>小猪佩奇</p>
</body>
三、CSS3新增的的过渡
过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种形式变换为另一种样式时为元素添加效果。 过渡动画：是从一个状态渐渐地过渡到另外一个状态。 可以让我们的页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。 我们现在经常和:hover 一起搭配使用。 transition ：要过度的属性 花费时间 运动曲线 何时开始； 1.属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过度，写一个all就可以。 2.花费时间：单位是 秒 （必须写单位) 比如0.5s。 3.运动曲线：默认是ease。 参数：linear 匀速 ease 逐渐慢下来 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速。（可以省略） 4.何时开始：单位是 秒 （必须写单位） 可以设置延迟触发时间 默认是0s （可以省略）。<style>
div {
width: 200px;
height: 100px;
background-color: pink;
}
div:hover {
transition: width 1s ease-in-out 0s,height 1s ease-in-out 1s;
/* 如果想要写多个属性，用逗号分割。想要所有属性都变化，就写all就可以 */
/* transition: all 1s; */
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
四、CSS3的其它特性（了解）
1。图片变模糊 CSS3滤镜filter： filter CSS属性将模糊或颜色偏移的图形效果应用于元素。 filter：函数(); 例如：filter:blur(5px); blur模糊处理 数值越大越模糊<style>
img {
/* blur 是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
filter:blur(5px)
}
img:hover {
filter: blur(0);
}
</style>
</head>
<body>
<img src="images/bg.jpg" alt="">
</body>
2.计算盒子宽度width:calc 函数
CSS3 calc函数： calc()此CSS3函数让你在声明CSS属性值是执行一些计算。 width:calc(100%-80px); 括号里面可以使用+ - * /来进行计算。<style>
.father {
width: 200px;
height: 200px;
background-color: royalblue;
}
.son {
/* width: calc(150px+100px); */
/* 需求我们的子盒子宽度永远比父盒子小30px */
width: calc(100%-30px);
height: 30px;
background-color: chartreuse;
}
</style>
</head>
<body>
<!-- 需求我们的子盒子宽度永远比父盒子小30px -->
<div class="father">
<div class="son">
</div>
</div>
</body>