属性选择器
属性选择器权重是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;
}
<div class="icon1"> 1</div>
<div class="icon2"> 2</div>
<div class="icon3"> 3</div>
<div class="bottom4-icon"> 4</div>
<div class="bottom5-icon"> 5</div>
结构伪类选择器
-
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;
}
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
<li>第六个</li>
</ul>
伪元素选择器
-
element::afterelement::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;
}
