CSS3

选择器

first-child 表示选择列表中的第一个标签

li:first-child{background:#fff}

last-child 表示选择列表中的第n个标签

li:nth-child(3){background:#fff}

nth-last-child(3) 表示选择列表中的倒数第3个标签

li:nth-last-child(3){background:#fff}

nth-child(2n) 表示选择列表中的偶数标签，即选择 第2、第4、第6……

li:nth-child(2n){background:#fff}

nth-child(2n-1) 表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……

li:nth-child(2n-1){background:#fff}

nth-child(n+3) 表示选择列表中的标签从第3个开始到最后

li:nth-child(n+3){background:#fff}

nth-child(-n+3) 表示选择列表中的标签从0到3，即小于3的标签

li:nth-child(-n+3){background:#fff}

滤镜

网页变灰

html{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
}

渐变

上下线性渐变

html{
    height: 100%;
    background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(#3993ff, #fff);
}

渐变角度

html{
    height: 100%;
    background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(45deg, #3993ff, #fff);
}