:not(:last-of-type)

例子来自于这里。 一个post的list：

<ul class="posts">
  <li class="post">
    Lorem ipsum dolor sit.
  </li>
  <li class="post">
    Lorem ipsum dolor sit.
  </li>
  <li class="post">
    Lorem ipsum dolor sit.
  </li>
  <li class="post">
    Lorem ipsum dolor sit.
  </li>
</ul>

然后对应的css：

.post {
  border-bottom: 1px solid #eee;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
}

.post:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

如果使用:not则会节省很多时间：

.post:not(:last-of-type) {
  border-bottom: 1px solid #eee;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
}

还有一个更厉害的：

.posts * + * {
  border-top: 1px solid #eee;
  margin-top: .5rem;
  padding-top: .5rem;
}

box-sizing: border-box;

我司SPA是基于vue的，平台也只有iOS和安卓，所以考虑使用flex和vh、vw快速开发。 现在的布局基本上是这样的：

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(100vh - 20px);
  padding: 10px 0;
}

使用padding控制上下边距，space-between自动布局，感觉还可以。 但是有个坑就是这里height要根据padding用calc()一直调。 直到我发现这个：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

当时怎么没想到啊，真的蠢。

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  padding: 10px 0;
}

只用改padding就行了啊。 2017年 3月25日 星期六 10时41分41秒 CST