下(xià)面這(zhè)些CSS高(gāo)級技巧，一般人(rén)我可(kě)不告訴他(tā)哦。
- 使用(yòng) :not() 在菜單上應用(yòng)/取消應用(yòng)邊框
- 給body添加行高(gāo)
- 所有一切都垂直居中
- 逗号分(fēn)隔的(de)列表
- 使用(yòng)負的(de) nth-child 選擇項目
- 對(duì)圖标使用(yòng)SVG
- 優化(huà)顯示文本
- 對(duì)純CSS滑塊使用(yòng) max-height
- 繼承 box-sizing
- 表格單元格等寬
- 用(yòng)Flexbox擺脫外邊距的(de)各種hack
- 使用(yòng)屬性選擇器用(yòng)于空鏈接
使用(yòng) :not() 在菜單上應用(yòng)/取消應用(yòng)邊框
先給每一個(gè)菜單項添加邊框
/* add border */.nav li { border-right: 1px solid #666;}……然後再除去最後一個(gè)元素……
//* remove border */
.nav li:last-child { border-right: none;}……可(kě)以直接使用(yòng) :not() 僞類來(lái)應用(yòng)元素：
.nav li:not(:last-child) { border-right: 1px solid #666;}這(zhè)樣代碼就幹淨，易讀，易于理(lǐ)解了(le)。
當然，如果你的(de)新元素有兄弟(dì)元素的(de)話(huà)，也(yě)可(kě)以使用(yòng)通(tōng)用(yòng)的(de)兄弟(dì)選擇符（~）：
..nav li:first-child ~ li {
border-left: 1px solid #666;}給 body添加行高(gāo)
你不需要分(fēn)别添加 line-height 到每個(gè)
，
這(zhè)樣文本元素就可(kě)以很容易地從 body 繼承。
所有一切都垂直居中
要将所有元素垂直居中，太簡單了(le)：
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。
逗号分(fēn)隔的(de)列表
讓HTML列表項看上去像一個(gè)真正的(de)，用(yòng)逗号分(fēn)隔的(de)列表：
ul > li:not(:last-child)::after { content: ",";}對(duì)最後一個(gè)列表項使用(yòng) :not() 僞類。
使用(yòng)負的(de) nth-child 選擇項目
在CSS中使用(yòng)負的(de) nth-child 選擇項目1到項目n。
li { display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3) { display: block;}就是這(zhè)麽容易。
對(duì)圖标使用(yòng)SVG
我們沒有理(lǐ)由不對(duì)圖标使用(yòng)SVG：
.logo { background: url("logo.svg");}SVG對(duì)所有的(de)分(fēn)辨率類型都具有良好的(de)擴展性，并支持所有浏覽器都回歸到IE9。這(zhè)樣可(kě)以避開.png、.jpg或.gif文件了(le)。
優化(huà)顯示文本
有時(shí)，字體并不能在所有設備上都達到最佳的(de)顯示，所以可(kě)以讓設備浏覽器來(lái)幫助你：
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}注：請負責任地使用(yòng) optimizeLegibility。此外，IE /Edge沒有 text-rendering 支持。
對(duì)純CSS滑塊使用(yòng) max-height
使用(yòng) max-height 和(hé)溢出隐藏來(lái)實現隻有CSS的(de)滑塊：
.slider ul { max-height: 0; overlow: hidden;}.slider:hover ul { max-height: 1000px; transition: .3s ease;}繼承 box-sizing
讓 box-sizing 繼承 html：
html { box-sizing: border-box;}*, *:before, *:after { box-sizing: inherit;}這(zhè)樣在插件或杠杆其他(tā)行爲的(de)其他(tā)組件中就能更容易地改變 box-sizing 了(le)。
表格單元格等寬
表格工作起來(lái)很麻煩，所以務必盡量使用(yòng) table-layout: fixed 來(lái)保持單元格的(de)等寬：
.calendar { table-layout: fixed;}用(yòng)Flexbox擺脫外邊距的(de)各種hack
當需要用(yòng)到列分(fēn)隔符時(shí)，通(tōng)過flexbox的(de) space-between 屬性，你就可(kě)以擺脫nth-，first-，和(hé) last-child 的(de)hack了(le)：
.list { display: flex; justify-content: space-between;}.list .person { flex-basis: 23%;}現在，列表分(fēn)隔符就會在均勻間隔的(de)位置出現。
使用(yòng)屬性選擇器用(yòng)于空鏈接
當 元素沒有文本值，但 href 屬性有鏈接的(de)時(shí)候顯示鏈接：
a[href^="http"]:empty::before { content: attr(href);}相當方便。
