css3使用方法,CSS3 用法

属性选择器

属性选择器权重是10，使用时注意权重问题

E[att]选择具有att属性的元素

E[att="value"]选则属性att等于value的元素

E[att^="value"]选则属性att为value开头的元素

E[att$="value"]选则属性att为value结尾的元素

E[att*="value"]选则属性att包含value的元素

input[value] {

color: blue;

}

div[class^=icon]{

color: red;

}

div[class $ =icon]{

color: yellow;

}

div[class * =icon]{

font-size: 20px;

}

1

2

3

4

5

结构伪类选择器

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 会把所有元素排列序号，执行的时候首先看序号，然后去看选择元素，如果没有不选择

nth-of-type 会把指定元素排列序号，执行先去看选择元素，然后去选择序号

ul :first-child {

background-color: #fff;

}

ul li:last-child {

background-color: red;

}

ul li:nth-child(3) {

background-color: blue;

}

/* even为偶数列，odd为奇数 */

ul li:nth-child(even){

font-size: 32px;

}

/* 可为计算公式必须是n，从零开始每次加一 */

ul li:nth-child(n){

color: pink;

}

/* 2n 为偶数，2n+1为奇数，n+5从第五个开始，-n+5选择前五个 */

ul li:nth-child(2n){

color: yellow;

}

ul li:first-of-type {

color: green;

}

ul li:nth-of-type(2) {

color: green;

}

• 第一个
• 第二个
• 第三个
• 第四个
• 第五个
• 第六个

伪元素选择器

element::after element::before

before after 必须具有content属性

权重为1

div::after {

content: '';

backgroud-color: red;

}

filter CSS滤镜

filter: url('')

filter: blur(Spx) 模糊 值为length

filter: contrast(200%) 对比度 值为num

filter: grayscale(80%) 灰度 值为0-1之间的小数

filter: hue-rotate(90deg) 色相旋转 值为angle

filter: drop-shadow(16px 16px 20px red) invert(75%) 阴影

filter: brightness(2.3) 亮度 值为0-1之间的小数

filter: saturate(3.6)饱和度 值为num

filter: opacity(55%)透明度 值为0-1之间的小数

filter: sepia(0.77)褐色 值为0-1之间的小数

calc() CSS 计算

可以使用+ - * /进行计算

width: calc(100% - 50px);

transition CSS 过渡

transition: 要过渡的属性 花费时间 运动曲线 何时开始 谁做过渡给谁加

运动曲线ease逐渐慢下来(默认) linear匀速 ease-in 加速 ease-out减速 ease-in-out先加速后减速

div{

width:200px;

heigth:300px;

transition: width 1s ease 0s, heigth 1s ease 0s;

/* 多个属性可以直接写all */

}

div:hover {

width:240px;

heigth:400px;

}