直接入題
1. 每個(gè)單詞的首字母大寫
其實(shí)我第一次看到這個(gè)功能的時(shí)候就是使用 JS 去實(shí)現(xiàn)這個(gè)功能锯厢，想都沒想 CSS 可以完成這個(gè)功能。馬上就屁顛屁顛的寫了一個(gè)方法：
<pre style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: 400; font-stretch: inherit; font-size: 18px; line-height: inherit; font-family: inherit; vertical-align: baseline; word-break: break-word; color: rgb(93, 93, 93); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">
function capitalizeFirst( str ) {
let result = '';
result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
return result
}
</pre>
寫完這個(gè)方法后叭爱，還有點(diǎn)小得意撮躁，也就沒想其他方案。直到有一天看到 CSS 也能做這個(gè)功能的時(shí)候买雾，我才反應(yīng)過來明明一句 CSS 就能解決的問題把曼，我卻使用了更復(fù)雜的方案杨帽。
CSS 方案如下：
<pre style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: 400; font-stretch: inherit; font-size: 18px; line-height: inherit; font-family: inherit; vertical-align: baseline; word-break: break-word; color: rgb(93, 93, 93); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">
.capitalizeFirst-css {
text-transform: capitalize;
}
</pre>
是不是特別簡(jiǎn)單（代碼在上面的 blog 倉庫，訪問 cssDo 路由便可嗤军，下面的案例都是這個(gè)路由下）：
text-transform 簡(jiǎn)單介紹
這是 CSS2 中的屬性注盈，參數(shù)有 capitalize | uppercase | lowercase | none
參數(shù)介紹：
- none： 默認(rèn)。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本叙赚。
- capitalize： 文本中的每個(gè)單詞以大寫字母開頭老客。
- uppercase： 定義僅有大寫字母。
- lowercase： 定義無大寫字母震叮，僅有小寫字母胧砰。
從這個(gè)屬性我們可以知道全部大寫（小寫）的需求這個(gè)屬性也能輕易實(shí)現(xiàn)。
2. 單選高亮
可能你看到“單選高亮”沒反應(yīng)過來苇瓣，直接來張圖片你就馬上清楚了：
不知道你是否第一次看到這種單選高亮的需求時(shí)尉间，是怎么處理的。我第一次直接是用 JS 控制的击罪。后來我發(fā)現(xiàn)這個(gè)需求用 CSS 更方便處理乌妒。
主要代碼就是一段 CSS 代碼：
<pre style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: 400; font-stretch: inherit; font-size: 18px; line-height: inherit; font-family: inherit; vertical-align: baseline; word-break: break-word; color: rgb(93, 93, 93); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">
// 省略部分代碼，詳細(xì)代碼看倉庫
.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>
</pre>
看效果：
兩個(gè)選擇器的區(qū)別
~ 選擇器：查找某個(gè)元素后面的所有兄弟元素
- 選擇器：查找某個(gè)元素后面緊鄰的兄弟元素
擴(kuò)展
其實(shí)這個(gè)技巧也完全可以使用在導(dǎo)航欄的交互效果外邓，個(gè)人覺得可以簡(jiǎn)化一部分工作。
3古掏、多列等高問題
之前做 pc 端的客戶畫像需求時(shí)损话，遇到需要左右兩邊等到的需求（左邊塊的高度會(huì)隨著內(nèi)容變化）。
最初我使用的 JS 計(jì)算高度再賦值槽唾，可是這樣會(huì)有頁面閃動(dòng)的效果丧枪。所以找到了兩種 CSS 的處理方案：
- 每列設(shè)置一個(gè)很大的 padding，再設(shè)置一個(gè)很大的負(fù)的 margin
- 使用 display: table;
第一種有明顯的缺陷：
- border-bottom 看不到了
- 設(shè)置的下方的兩個(gè)圓角也不見了
所以我使用了 display: table; 的方式來實(shí)現(xiàn)等高庞萍，可以說非常的方便拧烦。
建議不要一味的抵觸 table，有的場(chǎng)景還是可以使用的钝计。
4恋博、表單驗(yàn)證
先聲明：這里沒有用到 JS，不過用到了 HTML5 關(guān)于 <input> 的新屬性 —— pattern( 檢查控件值的正則表達(dá)式 )私恬。
還有一點(diǎn)：其實(shí)我在實(shí)際項(xiàng)目中沒這么用過债沮。
代碼如下：
<pre style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: 400; font-stretch: inherit; font-size: 18px; line-height: inherit; font-family: inherit; vertical-align: baseline; word-break: break-word; color: rgb(93, 93, 93); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">
input[type="text"]:invalid ~ input[type="submit"] {
display: none
}
<div class="form-css">
<input type="text" name="tel" placeholder="輸入手機(jī)號(hào)碼" pattern="^1[3456789]\d{9}$" required><br>
<input type="text" name="smscode" placeholder="輸入驗(yàn)證碼" pattern="\d{4}" required><br>
<input type="submit" ></input>
</div>
</pre>
效果如下（樣式不好看的問題請(qǐng)忽略）：
invalid 偽類和 vaild 偽類
- valid 偽類，匹配通過 pattern 驗(yàn)證的元素
- invalid 偽類本鸣，匹配未通過 pattern 驗(yàn)證的元素
后記
還有一些大家比較常用的這里就不介紹了疫衩，
