（點擊上方公眾號，可快速關注）
英文：Matt Smith 譯文：伯樂在線專欄作者 - cucr
如有好文章投稿，請點擊 → 這裡了解詳情
如需轉載，發送「轉載」二字查看說明
一些小技巧讓你的CSS技術更專業
使用:not()去除導航上不需要的邊框
為body添加行高
垂直居中任何元素
逗號分離的列表
使用負nth-child選擇元素
使用SVG圖標
文本顯示優化
在純CSS幻燈片上使用max-height
繼承box-sizing
表格單元格等寬
使用Flexbox擺脫邊界Hack
使用屬性選擇器選擇空連結
使用:not()添加/去除導航上不需要的邊框
添加邊框…
/* 添加邊框 */
.nav li {
border-right: 1px solid #666;
}
…然後去除最後一個元素的邊框…
/* 移除邊框 */
.nav li:last-child {
border-right: none;
}
…使用偽類 :not() 將樣式只應用到你需要的元素上：
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
當然，你可以使用.nav li + li 或者 .nav li:first-child ~ li， 但是使用 :not() 的意圖特別清晰，CSS選擇器按照人類描述它的方式定義邊框。
為body添加行高
你不需要分別為每一個 <p>, <h*> 等元素添加行高，而是為body添加:
body {
line-height: 1;
}
這種方式下,文本元素可以很容易從body繼承。
垂直居中任何元素
不，這不是黑魔法，你的確可以垂直居中任何元素：
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
想讓其他元素居中？垂直，水平…任何東西，任何時間，任何位置？CSS-Tricks上有 一個不錯的文章 來做到這一切。
注意：IE11上flexbox的一些 缺陷行為。
逗號分離的列表
讓列表看起來更像一個真正的逗號分離列表：
ul > li:not(:last-child)::after {
content: ",";
}
使用偽類:not() ，這樣最後一個元素不會被添加逗號。
使用負 nth-child 選擇元素
在CSS使用負nth-child選擇1到n的元素。
li {
display: none;
}
/* 選擇1到3的元素並顯示 */
li:nth-child(-n+3) {
display: block;
}
或者，你已經學習了一些關於 使用 :not()，嘗試：
/* select items 1 through 3 and display them */
/* 選擇1到3的元素並顯示 */
li:not(:nth-child(-n+3)){
display: none;
}
這很簡單。
使用SVG圖標
沒有理由不使用SVG圖標：
.logo {
background: url("logo.svg");
}
SVG對所有解析度類型具有良好的伸縮性，IE9以上的所有瀏覽器都支持。所以放棄.png，.jpg或gif-jif等任何文件。
注意：如果你使用SVG圖標按鈕，同時SVG加載失敗，下面能幫助你保持可訪問性：
.no-svg .icon-only:after {
content: attr(aria-label);
}
文本顯示優化
有些字體在所有的設備上並不是最優顯示，因此讓設備瀏覽器來幫忙：
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
注意：請使用optimizeLegibility。同時，IE/Edge不支持text-rendering。
在純CSS實現的內容滑塊上使用max-height
在純CSS實現的內容滑塊上使用max-height，同時設置overflow hidden：
.slider ul {
max-height: 0;
overlow: hidden;
}
.slider:hover ul {
max-height: 1000px;
transition: .3s ease; /* animate to max-height */
}
繼承box-sizing
從html繼承box-sizing：
html {
box-sizing: border-box;
}
, :before, *:after {
box-sizing: inherit;
}
這讓插件或使用其他行為的組件能很容易地改變box-sizing。
表格單元格等寬
使用表格會很痛苦，因此使用table-layout：fixed來保持單元格相同的寬度：
.calendar {
table-layout: fixed;
}
無痛表格布局。
使用Flexbox擺脫邊界Hack
當使用列約束時，可以拋棄nth-，first- 和 last-child的hacks，而使用flexbox的space-between屬性：
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
現在列約束總是等間隔出現。
使用屬性選擇器選擇空連結
顯示沒有文本值但是 href 屬性具有連結的 a 元素的連結：
a[href^="http"]:empty::before {
content: attr(href);
}
這樣做很方便。
瀏覽器支持
這些技巧在當前版本的Chrome，Firefox， Safari， 以及Edge， 和IE11可以工作。
覺得本文對你有幫助？請分享給更多人
關注「前端大全」，提升前端技能