CSS 3

发表于   |   分类于   |     |   次阅读

CSS3有非常多的新属性，特别是在移动端的使用，不仅能够加速CPU渲染效果，而且还能够省去一大堆的javascript。

下面我会介绍一些CSS3的专业技巧，如果你需要考虑IE浏览器，那就请掠过此篇文章，因为这些特性只能兼容到IE11。

:not()使用

经常在布局导航栏或者多个div时，考虑到最后一个元素的border、margin什么之类

1
2
3
4
5
6
7
8
9
/* add border */
.nav li {
  border-right: 1px solid #666;
}

/* remove border */
.nav li:last-child {
  border-right: none;
}

但当你使用:not()伪类时，就可以应用到想作用的元素

1
2
3
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

当然你也可以使用.nav li + li，甚至是.nav li:first-child ~ li，但是:not()伪类字面意思清晰明了，当然符合现流行的语义化咯

Line-Height

你不必对每一个h标签，p标签分别添加line-height属性，相反的，你只需要在body上添加就可以了，因为文本元素会简简单单的继承这一属性。

1
2
3
body {
  line-height: 1;
}

神马都垂直居中

对，这不是变魔术，你真的可以垂直居中任何元素

1
2
3
4
5
6
7
8
9
10
11
12
html, body {
  height: 100%;
  margin: 0;
}

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

还想让什么东西放在正中心么？垂直的、水平的，任何元素，任何时间，任何地点，请参考牛人
注意在IE11下，flexbox可能有些问题

nth-child反选

通过使用-nth-child选择从1到n

1
2
3
4
5
6
7
8
li {
  display: none;
}

/* 选择前三个元素，让它们显示 */
li:nth-child(-n+3) {
  display: block;
}

或者你还可以这么做

1
2
3
4
/* 同上 */
li:not(:nth-child(-n+3)) {
  display: none;
}

SVG按钮

1
2
3
4
5
6
7
.logo {
  background: url("logo.svg");
}
/* 当SVG没有加载出来时，用下面代码就行了 */
.no-svg .icon-only:after {
  content: attr(aria-label);
}

Lobotomized Owl选择器

名字听起来怪怪的，但确实有很牛逼的兼容性。下面这段代码的效果是(b)，如果非常有兴趣，可以继续阅读这哥们写的

1
2
3
* + * {
  margin-top: 1.5em;
}

max-height滑动效果

纯CSS实现滑动效果，通过使用max-height和overflow hidden

1
2
3
4
5
6
7
8
9
.slider ul {
  max-height: 0;
  overflow: hidden;
}

.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease; /* animate to max-height */
}

box-sizing继承

让box-sizing充满整个页面吧！！！

1
2
3
4
5
6
7
html {
  box-sizing: border-box;
}

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

“链接”样式

给默认的a链接样式，有时生成a链接不带class属性，想操作它并且又不影响其它的兄弟链接

1
2
3
4
a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

参考资源
https://github.com/AllThingsSmitty/css-protips