前言

本文开始讲述代码中的实践技巧，每一条都是切实有用的部分，可以对照下自己的相关代码是如何写的。

备注：以下技巧中存在兼容问题的不在重点考虑中。请移步到caniuse中查看兼容结果，写好降级兼容或者放弃该效果。

代码技巧枚举

设置最后一个没有某样式

比较常见的是最后一个项目没有分割线（边框），一般这种情况大家之前是两种写法。
第一种：基于有兄弟节点的选择器写样式，没有兼容问题

  1. .item + .item{
  2. border:1px solid red ;
  3. }

第二种：基于全部，然后最后一个没有某样式,这种的缺点在于比较繁琐，而且很多写相反样式比较繁琐

  1. .item{
  2. border:1px solid red ;
  3. }
  4. .item:last-child{
  5. border:none;
  6. }

那么本文推荐的是第三种，使用not选择器，可读性更强

  1. .item:not(:last-child){
  2. border:1px solid red ;
  3. }

选择第1-n个

  1. .item{
  2. border:1px solid red;
  3. }
  4. //展示前三个
  5. .item:nth-child(-n+3){
  6. border-color:green;
  7. }

获取一个元素的最终样式

很多时候，我们直接获取元素的样式是拿到的获取样式，而非最终样式，实际上元素的样式有很多是来自继承的样式的，我们如何拿到这部分样式，web api提供了这样的方法：getComputedStyle：获取实际计算样式