一、处理九刀十断的情况
css2：使用伪类:first-child
例如：.news-list .item{border:1px solid #ddd;} .news-list .item:first-child{border:none;}
css3：使用伪类:not(:last-child)、:not(:first-child)、:not(:nth-child)等
二、遵循“左上”原则
² 九宫格列表
² 有序无序列表
² 按钮群组
三、巧用：before，：after伪类
1、before：在元素前面添加内容，并且可控制内容的样式（css2,可兼容IE8）
通常用于：三角、附属标题、边框、投影、清除浮动等
2、after：在元素前面添加内容，并且可控制内容的样式（css3,不兼容IE8）
通常用于：三角、附属标题、边框、投影、清除浮动等
四、具有层叠样式表中“层”的概念
根据一般项目业务依次可分为：
底层 组件（模块） 业务 主题 尺寸状态
base module business theme size/static
从左到右样式权限越高
五、可继承的box-sizing，a:hover等
1、让 box-sizing 继承 div.box：
*, *:before, *:after { box-sizing: inherit; } （存在底层样式里或某个组件、某个业务区域）
.box{ box-sizing: border-box; } （当前需要控制的对象）
2、让某个div.info里面的a:hover的color继承body：
a:hover{ color:inherit !important; }（存在底层样式里或某个组件、某个业务区域）
.info a{ color:#999; }（当前需要控制的对象）
六、固定的表格布局
.table{table-layout: fixed;}
七、使用负的 nth-child 选择项目
在CSS中使用负的 nth-child 选择项目1到项目n。
.item{ display: none; }
.item:nth-child(-n+3){ display: block; }
八、z-index 支持transition过渡
示例：http://zomigi.com/demo/z-index_transition.html
九、单选、复选按钮的样式
我们不使用任何图片，来给某个复选按钮设置样式：
<input type="checkbox" id="check" name="check" />
<label for="check">Checkbox</label>
input[type=checkbox] {display: none;}
input[type=checkbox] + label:before {
content: "";
border: 1px solid #000;
font-size: 11px;
line-height: 10px;
margin: 0 5px 0 0;
height: 10px;
width: 10px;
text-align: center;
vertical-align: middle;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
}
效果：
兼容性： :checked（IE9+）表现正常。在上面的示例代码中，我们隐藏了原始的复选按钮，用我们自己的代替。当被勾选时，我们通过content 显示一个 Unicode 字符。
我们还可以给复选按钮加上动画：
input[type=checkbox] + label:before {
content: "\2713";
color: transparent;
transition: color ease .3s;
}
input[type=checkbox]:checked + label:before {
color: #000;
}
下面是单选按钮的动画：
input[type=radio] + label:before {
content: "\26AB";
border: 1px solid #000;
border-radius: 50%;
font-size: 0;
transition: font-size ease .3s;
}
input[type=radio]:checked + label:before {
font-size: 10px;
}
完整的 Unicode 清单:https://unicode-table.com/cn/
十、适当时候使用visibility
在元素隐藏的情况下需要获得其属性（宽高）
