直接入題

創(chuàng)新互聯(lián)公司成立與2013年，先為曹縣等服務(wù)建站，曹縣等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為曹縣企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1. 每個單詞的首字母大寫

其實我第一次看到這個功能的時候就是使用 JS 去實現(xiàn)這個功能，想都沒想 CSS 可以完成這個功能。馬上就屁顛屁顛的寫了一個方法：

function capitalizeFirst( str ) {
let result = '';
result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
return result
}
寫完這個方法后，還有點小得意，也就沒想其他方案。直到有一天看到 CSS 也能做這個功能的時候，我才反應(yīng)過來明明一句 CSS 就能解決的問題，我卻使用了更復(fù)雜的方案。

CSS 方案如下：

.capitalizeFirst-css {
text-transform: capitalize;
}
是不是特別簡單（代碼在上面的 blog 倉庫，訪問 cssDo 路由便可，下面的案例都是這個路由下）：

text-transform 簡單介紹

這是 CSS2 中的屬性，參數(shù)有 capitalize | uppercase | lowercase | none

參數(shù)介紹：

none： 默認。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本。
capitalize： 文本中的每個單詞以大寫字母開頭。
uppercase： 定義僅有大寫字母。
lowercase： 定義無大寫字母，僅有小寫字母。
從這個屬性我們可以知道全部大寫（小寫）的需求這個屬性也能輕易實現(xiàn)。

2. 單選高亮

可能你看到“單選高亮”沒反應(yīng)過來，直接來張圖片你就馬上清楚了：

不知道你是否第一次看到這種單選高亮的需求時，是怎么處理的。我第一次直接是用 JS 控制的。后來我發(fā)現(xiàn)這個需求用 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>
看效果：

兩個選擇器的區(qū)別

~ 選擇器：查找某個元素后面的所有兄弟元素

• 選擇器：查找某個元素后面緊鄰的兄弟元素

擴展

其實這個技巧也完全可以使用在導(dǎo)航欄的交互效果，個人覺得可以簡化一部分工作。

3、多列等高問題

之前做 pc 端的客戶畫像需求時，遇到需要左右兩邊等到的需求（左邊塊的高度會隨著內(nèi)容變化）。

最初我使用的 JS 計算高度再賦值，可是這樣會有頁面閃動的效果。所以找到了兩種 CSS 的處理方案：

每列設(shè)置一個很大的 padding，再設(shè)置一個很大的負的 margin
使用 display: table;
第一種有明顯的缺陷：

border-bottom 看不到了
設(shè)置的下方的兩個圓角也不見了
所以我使用了 display: table; 的方式來實現(xiàn)等高，可以說非常的方便。

建議不要一味的抵觸 table，有的場景還是可以使用的。

4、表單驗證

先聲明：這里沒有用到 JS，不過用到了 HTML5 關(guān)于 <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 驗證的元素
后記

還有一些大家比較常用的這里就不介紹了，

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前標(biāo)題：「前端詞典」這些功能其實不需要JS，CSS就能搞定-創(chuàng)新互聯(lián)
本文路徑：http://jinyejixie.com/article0/hgjoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站策劃、做網(wǎng)站、關(guān)鍵詞優(yōu)化、手機網(wǎng)站建設(shè)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)