css进阶（2）

盒子模型

box-sizing: border-box

不会因为内边距和边框而改变盒子的大小

宽度计算

 width:calc( calc里面可以放计算公式，符号前后要用空格隔开 );

属性选择器（了解即可）

修改了input里面的value属性，没有value的不修改

input[value] {

            color: blue;

 }

修改了type=password的颜色，不符合这个条件的不修改 

 input[type=password] {

            color: red;

 }

div标签里的class属性，属性必须是abc开头的才进行修改修改

 div[class^=abc] {

            color: red;

 }

section标签里的class属性，属性必须是abc结尾的才进行修改修改 */

section[class$=abc] {

            color: red;

}

结构伪类选择器

选择ul里面的第一个li进行修改 

ul li:first-child {

            color: red;

 }

选择ul里面的最后一个li进行修改 

ul li:last-child {

            color: red;

}

ul li:nth-child(even) {

            color: blue;

}

选择ul里面的第n个li进行修改  n可以是数字，关键字或公式。如果此时ul里面的n个不是li标签，则修改无效，必须序号跟标签要对应才可以修改

         关键字：even偶数 odd奇数  

         公式：

         n 代表自加，全选

         2n 偶数

         2n+1 奇数

         5n 5 10 15...

         n+5 从第五个开始包含第五个，一直到最后

         -n+5 前五个包含第五个

修改父类元素中第一个div标签 

section div:first-of-type{

            color: skyblue;

}

修改父类元素中最后一个p标签 

section p:last-of-type{

            color: skyblue;

}

section span:nth-of-type(2){

            color: skyblue;

}

 修改父类元素中第n个span标签

         关键字：even偶数 odd奇数  

         公式：

         n 代表自加，全选

         2n 偶数

         2n+1 奇数

         5n 5 10 15...

         n+5 从第五个开始包含第五个，一直到最后

         -n+5 前五个包含第五个

css过度动画

transition:  以下四个值，要跟hover搭配使用

过渡的值 宽度高度背景颜色内外边距  全部就写all

花费时间 单位是秒

运动曲线 默认是ease 可以省略

何时开始  单位是秒，可以设置延迟触发时间默认是0s  可以省略

css图片滤镜

语法格式：

（  filter：（函数））

filter：blur（5px）数值越大图片越模糊