前言
今天我們大家介紹一些你可能乍一眼以為一定需要 JavaScript 才能完成的功能，其實 CSS 就能完成，甚至更加簡單。
內容已經發布在 gitHub 了，歡迎圍觀 Star，更多文章都在 gitHub。
直接入題
1. 每個單詞的首字母大寫
其實我第一次看到這個功能的時候就是使用 JS 去實現這個功能，想都沒想 CSS 可以完成這個功能。馬上就屁顛屁顛的寫了一個方法：
function capitalizeFirst( str ) {
let result = '';
result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
return result
}
複製程式碼寫完這個方法後，還有點小得意，也就沒想其他方案。直到有一天看到 CSS 也能做這個功能的時候，我才反應過來明明一句 CSS 就能解決的問題，我卻使用了更復雜的方案。
CSS 方案如下：
.capitalizeFirst-css {
text-transform: capitalize;
}
複製程式碼是不是特別簡單（程式碼在上面的 blog 倉庫，訪問 cssDo 路由便可，下面的案例都是這個路由下）：
text-transform 簡單介紹
這是 CSS2 中的屬性，引數有 capitalize | uppercase | lowercase | none
引數介紹：
- none： 預設。定義帶有小寫字母和大寫字母的標準的文字。
- capitalize： 文字中的每個單詞以大寫字母開頭。
- uppercase： 定義僅有大寫字母。
- lowercase： 定義無大寫字母，僅有小寫字母。
從這個屬性我們可以知道全部大寫（小寫）的需求這個屬性也能輕易實現。
2. 單選高亮
可能你看到“單選高亮”沒反應過來，直接來張圖片你就馬上清楚了：
不知道你是否第一次看到這種單選高亮的需求時，是怎麼處理的。我第一次直接是用 JS 控制的。後來我發現這個需求用 CSS 更方便處理。
主要程式碼就是一段 CSS 程式碼：
// 省略部分程式碼，詳細程式碼看倉庫
.input:checked + .colors {
border-color: #e63838;
color: #e63838;
}
<div class="single-check">
<input class="input" type="radio" name="colors" value="1">
<div class="colors">天空之境</div>
</div>
複製程式碼看效果：
兩個選擇器的區別
~ 選擇器：查詢某個元素後面的所有兄弟元素
+ 選擇器：查詢某個元素後面緊鄰的兄弟元素
擴充套件
其實這個技巧也完全可以使用在導航欄的互動效果，個人覺得可以簡化一部分工作。
3、多列等高問題
之前做 pc 端的客戶畫像需求時，遇到需要左右兩邊等到的需求（左邊塊的高度會隨著內容變化）。
最初我使用的 JS 計算高度再賦值，可是這樣會有頁面閃動的效果。所以找到了兩種 CSS 的處理方案：
- 每列設定一個很大的 padding，再設定一個很大的負的 margin
- 使用
display: table;
第一種有明顯的缺陷：
border-bottom看不到了- 設定的下方的兩個圓角也不見了
所以我使用了 display: table; 的方式來實現等高，可以說非常的方便。
建議不要一味的牴觸 table，有的場景還是可以使用的。
4、表單驗證
先宣告：這裡沒有用到 JS，不過用到了 HTML5 關於
<input>的新屬性 —— pattern( 檢查控制元件值的正規表示式 )。
還有一點：其實我在實際專案中沒這麼用過。
程式碼如下：
input[type="text"]:invalid ~ input[type="submit"] {
display: none
}
<div class="form-css">
<input type="text" name="tel" placeholder="輸入手機號碼" pattern="^1[3456789]\d{9}$" required><br>
<input type="text" name="smscode" placeholder="輸入驗證碼" pattern="\d{4}" required><br>
<input type="submit" ></input>
</div>
複製程式碼效果如下（樣式不好看的問題請忽略）：
invalid 偽類和 vaild 偽類
- valid 偽類，匹配通過 pattern 驗證的元素
- invalid 偽類，匹配未通過 pattern 驗證的元素
後記
還有一些大家比較常用的這裡就不介紹了，週三愉快。
最後
你可以關注我的同名公眾號【小生方勤】，這裡我會分享優質的文章，我們一同進步。
如果你想進【大前端交流群】，點選加群交流即刻加入。