CSS3 学习笔记

选择器

子节点（不包含孙节点）

E > F {
  // styles
}

第n个子节点

E > F:nth-child(2) {
  // 第二个F节点
}
E > F:nth-child(2n) {
  // 所有偶数节点
}
E > F:nth-child(2n + 1) {
  // 所有偶数节点后面那个节点
}
:nth-child(-n + 3) {
  // 前3个节点
}

紧邻的节点（从第二个往后开始生效）

E + F

多列文本

.column3 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-gap: 15px;
  -webkit-column-gap:15px;
  column-gap: 15px;
}

还有一些column-xxx的方法，基本上可以望文生义。

渐变

线性渐变

.selector{
  background:-moz-linear-gradient(left, white, black); //firefox
  background:-webkit-linear-gradient(left, white, black); //webkit
  background:linear-gradient(to right, white, black); // standard
}

放射渐变

background:radial-gradient( [ <options> || <angle>,]? [ <shape> || <size>,]? <stop>, <stop>;[, <stop>]*)

.selector{
  background:-moz-radial-gradient(10% 30%, white, black); //firefox
  background:-webkit-radial-gradient(10% 30%, white, black); //webkit
}

清除浮动

.clr {
  zoom:1;
}
.clr:after {
  clear:both;
  visibility: hidden;
  display: block;
  height: 0;
  line-height: 0;
  content: "";
}

如果在chrome下，只要简单的：

.clr {
  overflow:hidden;
}