10個CSS技巧讓你前端工作更輕松
掌握這10個CSS實用技巧可讓你的前端工作更輕松，尤其是初學前端的小白，即使現在看不懂也可收藏起來，以備需要時用上。如果你是高手有話要說，歡迎在留言區發表高見。
廢話不多說，直接上干貨：
干貨來了，趕緊做筆記。。。
一、使用 :not() 在菜單上應用/取消應用邊框
我們通常的做法是先給每個菜單項設置邊框，然后再設置最后一個菜單的邊框為零。
1 | /* add border */ .nav li { border-right: 1px solid #666; }
//* remove border */ .nav li:last-child { border-right: none; } |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 |
其實不需要這么麻煩，使用 :not() 偽類即可達到同樣的效果，而且代碼更干凈，易讀。
1 | .nav li:not(:last-child) { border-right: 1px solid #666; } |
2 | |
3 |
二、使用counter()在列表中自動添加序號
使用它，你能方便的在頁面標題，區塊和其它各種連續出現的頁面內容上添加序號。有了它，你就不必限制于只能使用
來實現這個效果，你可以更靈活的在頁面上使用自定義數字序列。
1 | body { counter-reset: choose; } h4:before { counter-increment: choose; content: "Choose #" counter(choose) "."; } |
2 | |
3 | |
4 | |
5 | |
6 | |
7 |
三、使用calc()做算術
這個函數可以執行簡單的算術計算，例如計算元素的長寬，不用寫JS代碼。這個函數支持所有簡單的基本算術運算，包括加減乘除。
1 | .parent { width: 100%; position: relative; }
.child { position: absolute; left: 100px; width: calc(90% - 100px); } |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 |
四、使用:nth-child(n)選擇項目
:nth-child(3) 表示選擇列表中的第三個元素
:nth-child(2n)表示列表中的偶數標簽，即選擇第2、第4、第6……標簽
:nth-child(2n-1) 表示選擇列表中的奇數標簽，即選擇 第1、第3、第5、第7……標簽
:nth-child(n+3) 表示選擇列表中的標簽從第3個開始到最后（>=3）
:nth-child(-n+3) 表示選擇列表中的標簽從0到3，即小于3的標簽(<=3)
:nth-last-child(3) 表示選擇列表中的倒數第3個標簽
:nth-of-type(n) 匹配屬于父元素的特定類型的第 N 個子元素的每個元素
（注：第一個子元素的下標是1）
五、在CSS中用attr()顯示HTML屬性值
attr()功能早在CSS 2.1標準中就已經出現，它能通過CSS獲取到html上的屬性，在很多情況下都能幫你省去了以往需要Javascript處理的過程。
要想使用這個功能，你需要用到三種元素：一個:before或:afterCSS偽類樣式，.content屬性，和一個帶有HTML屬性名稱的attr()表達式。
1 | h3:before { content: attr(data-id) " "; } <h3 data-id="1">This is a h3</h3> |
2 | |
3 | |
4 |
注：在新版的CSS3標準中，attr()功能被擴展，可以用在各種CSS標記中。
六、給 body添加行高
你不需要分別添加 line-height ，只要添加到 body 即可。
1 | body { line-height: 1; } |
2 | |
3 |
這樣文本元素就可以很容易地從 body 繼承。
七、表格列寬自適用
當要調整表格列寬時，是比較痛苦的。這里有一個可以使用的技巧：給td元素添加white-space: nowrap;能讓文本正確的換行。
1 | td { white-space: nowrap; } |
2 | |
3 |
八、包裹長文本
如果你碰到一個比自身容器長的文本，默認時，不管容器的寬度，文本都將水平填充。如下圖：
這里，采用簡單的CSS代碼就能在容器中調整文本：
1 | pre { white-space: pre-line; word-wrap: break-word; } |
2 | |
3 | |
4 |
效果如下圖：
九、實現loading省略號動畫
使用CSS3的幀動畫來模擬loading文字后面的3個小省略號的動畫效果,對于簡單的加載狀態是很有用的，而不用去使用gif圖像。
1 | .loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\2026"; /* ascii code for the ellipsis character */ } @keyframes ellipsis { from { width: 2px; } to { width: 15px; } } |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 |
十、背景漸變動畫
CSS中最具誘惑的一個功能是能添加動畫效果，除了漸變，你可以給背景色、透明度、元素大小添加動畫。目前，你不能為漸變添加動畫，但下面的代碼可能有幫助。它通過改變背景位置，讓它看起來有動畫效果。
1 | button { background-image: linear-gradient(#5187c4, #1c2f45); background-size: auto 200%; background-position: 0 100%; transition: background-position 0.5s; } button:hover { background-position: 0 0; } |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 |
以上這10個CSS實用技巧，你學會了嗎？當然，關于CSS的技巧還有很多很多，我們會在后續文章中根據不同用途給大家分類介紹。如果想學習更多軟件開發方面的知識，可多多關注我們哦！
