css小技巧（一）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

灰色图像

相信大家都看到过一些网站在一些特殊的节日的时候整个网站都变成了灰色的，我第一次看到的时候感觉好神奇啊，这么短的时候可以重新做一批图标。打开控制台之后，发现原来在根节点上加了个class，而class的样式用了grayscale，不禁感叹css之强大呀。

代码：

img.desaturate {
    filter: grayscale(100%);    
    -webkit-filter: grayscale(100%);    
    -moz-filter: grayscale(100%);    
    -ms-filter: grayscale(100%);    
    -o-filter: grayscale(100%);
}

实例： 默认给奖牌加上灰色，当接口返回有这个奖牌之后，移除这个class。

:not() 

布局遍历的元素，需要设置margin-right，而最后一个不需要设置，如上图的奖牌。

• 方法1：2行代码,繁琐

.item {  
    margin-right: 10px;
}
.item:last-child {  
    margin-right: 0;
}

• 方法2：一行代码，简单高效

.item:not(:last-child) { 
     margin-right: 10px;
}

顶部阴影

我们常常给元素加下阴影，那么上阴影也是可以的，直接用伪元素：before来实现

div:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.5);
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    z-index: 100;
}

元素设置行高

只需要给body设置line-height 就可以应用到下面的子元素p，h~

body {  
    line-height: 1;
}

垂直居中

直接用flex布局，设置横向，纵向都垂直居中

div {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
}

无序列表添加分隔符

直接用前面我们学到的：not，非最后一行添加“；”，最后一行添加“。”

ul > li:not(:last-child)::after {
    content: "；";
}
ul > li:last-child::after {
    content: "。";
}

nth-child

nth-child(n+2),指的是第2个元素开始到最后一个元素。

li {
    display: none;
}
li:nth-child(n+2) {
    display: block;
}

nth-child(-n+2)，指的是 从第1个项目到第2个项目

li {
    display: none;
}
li:nth-child(-n+2) {
    display: block;
}