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)数值越大图片越模糊

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值