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;
}


<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::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;
}