平常工作中，为了能够更好的掌握CSS这一个模块，我们需要掌握更多关于它的知识，不仅仅是掌握它的全部必要的知识，掌握一些小技巧对我们的帮助也是非常大的，这样我们就可以走更少的弯路，减少一些不必要的步骤，可以更快的完成代码的产出。
1.禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件
.disabled { pointer-events: none; }
2.检测鼠标双击
.test3 span { position: relative; } .test3 span a { position: relative; z-index: 2; } .test3 span a:hover, .test3 span a:active { z-index: 4; } .test3 span input { background: transparent; border: 0; cursor: pointer; position: absolute; top: -1px; left: 0; width: 101%; /* Hacky */ height: 301%; /* Hacky */ z-index: 3; } .test3 span input:focus { background: transparent; border: 0; z-index: 1; }
3.表格单元格等宽
.calendar { table-layout: fixed; }
4.继承 box-sizing
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
5.对纯 CSS 滑块使用 max-height
.slider ul { max-height: 0; overlow: hidden; } .slider:hover ul { max-height: 1000px; transition: .3s ease; }
6.黑白图像
让彩色照片显示为黑白照片
img { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }
7.使用负的 nth-child 选择项目
li { display: none; } /* select items 1 through 3 and display them */ li:nth-child(-n+3) { display: block; }
8.对图标使用 SVG
.logo { background: url("logo.svg"); }
9.逗号分隔的列表
ul > li:not(:last-child)::after { content: ","; }
10.使用 :not() 在菜单上应用/取消应用边框
/* add border */ .nav li { border-right: 1px solid #666; } 然后再除去最后一个元素 // remove border / .nav li:last-child { border-right: none; }
