CSS黑魔法小技巧，讓你少寫不必要的JS，代碼更優(yōu)雅
之前不久，由于自己平時(shí)涉獵還算廣泛，總結(jié)了一篇博客： 這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已 ，沒想到受到了大家的歡迎，有人希望能博主還能整理個(gè) CSS的一些黑魔法小技巧，無奈我 CSS 一直很渣，沒什么干貨，最近寫了一個(gè) Chrome 插件 GayHub，算是把 GitHub 的樣式審查了個(gè)變，在寫的過程中，也收獲了很多關(guān)于 CSS 的小技巧，尤其是開始的第一個(gè)技巧，學(xué)習(xí)到了很多，于是再加上一波搜集，就誕生這篇博文，歡迎補(bǔ)充~~~:joy:。
成都創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)公司、網(wǎng)站制作、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設(shè)計(jì)，對服務(wù)除甲醛等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！
1、利用 CSS 的 content 屬性 attr 抓取資料
需求
鼠標(biāo)懸浮實(shí)現(xiàn)一個(gè)提示的文字，類似github的這種，如圖：
想必大家都想到了偽元素 after ，但是文字怎么獲得呢，又不能用 JavaScript 。
CSS 的偽元素是個(gè)很強(qiáng)大的東西，我們可以利用他做很多運(yùn)用，通常為了做一些效果， content:" " 多半會留空，但其實(shí)可以在里面寫上 attr 抓資料哦！
hover
div{
width:100px;
border:1px solid red;
position:relative;
}
div:hover:after{
content:attr(data-msg);
position:absolute;
font-size: 12px;
width:200%;
line-height:30px;
text-align:center;
left:0;
top:25px;
border:1px solid green;
}在 attr 里面塞入我們在 html 新增的 data-msg 屬性，這樣偽元素 (:after) 就會得到該值。
最終效果
同樣的，你還可以結(jié)合其他強(qiáng)大的選擇器使用，例如： 使用屬性選擇器選擇空鏈接
顯示沒有文本值但是 href 屬性具有鏈接的 a 元素的鏈接：
a[href^="http"]:empty::before {
content: attr(href);
}這樣做很方便。
2、利用用 :valid 和 :invalid 來做表單即時(shí)校驗(yàn)
需求
讓表單檢驗(yàn)變得簡單優(yōu)雅，不需要寫冗長的 JS 代碼來校驗(yàn)設(shè)置樣式
html5 豐富了表單元素，提供了類似 required , email , tel 等表單元素屬性。同樣的，我們可以利用 :valid 和 :invalid 來做針對html5表單屬性的校驗(yàn)。
- :required 偽類指定具有required 屬性的表單元素
- :valid 偽類指定一個(gè)通過匹配正確的所要求的表單元素
- :invalid 偽類指定一個(gè)不匹配指定要求的表單元素
代碼
.valid {
border-color: #429032;
box-shadow: inset 5px 0 0 #429032;
}
.invalid {
border-color: #D61D1D;
box-shadow: inset 5px 0 0 #D61D1D;
}
.form-group {
width: 32rem;
padding: 1rem;
border: 1px solid transparent;
&:hover {
border-color: #eee;
transition: border .2s;
}
label {
display: block;
font-weight: normal;
}
input,
textarea {
display: block;
width: 100%;
line-height: 2rem;
padding: .5rem .5rem .5rem 1rem;
border: 1px solid #ccc;
outline: none;
&:valid {
@extend .valid;
}
&:invalid {
@extend .invalid;
}
}
}更多偽元素技巧可以參看這篇文章：你不知道的CSS
最終效果
3、利用 nth-of-type 選擇某范圍內(nèi)的子元素
需求
table表格紅綠相間，顯示的更加直觀
代碼
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
tbody tr:nth-of-type(2n){
background-color: red;
}
tbody tr:nth-of-type(2n+1){
background-color: green;
}
最終效果
你也這樣來做，選擇5-10的子元素。
table tr:nth-child(n+5):nth-child(-n+10) {
background-color: red;
}
4、讓文字像古詩一樣豎著呈現(xiàn)
需求
有時(shí)候，需要容器的文字從上到下排列，而不是從左往右排列，如圖所示：
這是segmentfault的回到頂部，他的實(shí)現(xiàn)很簡單，就是設(shè)置一定寬度讓其折行，如果我要實(shí)現(xiàn)這種需求呢？
代碼
writing-mode 這個(gè) CSS 屬性，我們是不是很少見到，很少用到！我們往往稱不常見的東西為“生僻”，就像是不常見的文字我們叫“生僻字”，因此不常見的 CSS 屬性，我們可以叫做“生僻屬性”， writing-mode 給我們的感覺就是一個(gè)“生僻屬性”，很弱，可有可無。這個(gè)屬性可以追溯到 IE 5.5 時(shí)代，兼容性是相當(dāng)好的。
詠柳
碧玉妝成一樹高，
萬條垂下綠絲絳。
不知細(xì)葉誰裁出，
二月春風(fēng)似剪刀。詠柳
碧玉妝成一樹高，
萬條垂下綠絲絳。
不知細(xì)葉誰裁出，
二月春風(fēng)似剪刀。.verticle-mode { writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } /* IE7比較弱，需要做點(diǎn)額外的動作 */ .verticle-mode { *width: 120px; } .verticle-mode h4, .verticle-mode p { *display: inline; *writing-mode: tb-rl; } .verticle-mode h4 { *float:right; }最終效果
更多細(xì)節(jié)與討論請移步張鑫旭老師的這篇文章： 改變CSS世界縱橫規(guī)則的writing-mode屬性
5、實(shí)現(xiàn)鼠標(biāo)懸浮內(nèi)容自動撐開的過渡動畫
需求
需要為一個(gè)列表添加個(gè)動畫，容器的高度是不確定的，也就是高度為 auto ，懸浮時(shí)候撐開內(nèi)容有個(gè)過渡動畫
如下圖所示：
而用 CSS3 實(shí)現(xiàn)的話，由于高度的不確定，而 transtion 是需要具體的樹枝，所以設(shè)置 height:auto 是無法實(shí)現(xiàn)效果的，可以通過 max-height 這個(gè)屬性間接的實(shí)現(xiàn)這么個(gè)效果， css 樣式是這樣的：
代碼
內(nèi)容列表內(nèi)容
內(nèi)容列表內(nèi)容
內(nèi)容
內(nèi)容列表內(nèi)容
內(nèi)容列表內(nèi)容
內(nèi)容
內(nèi)容列表內(nèi)容
內(nèi)容列表內(nèi)容
內(nèi)容.bd { max-height:0; overflow:hidden; transition: all 1s ease-out; } li:hover .bd { max-height: 600px; transition-timing-function: ease-in; }最終效果
跟前面 GIF 差不多，這里就不錄 GIF 了，有興趣的可以自己嘗試感受一下
6、利用 pointer-events 禁用 a 標(biāo)簽事件效果
需求：
在做 tab 切換的時(shí)候，當(dāng)選中當(dāng)前項(xiàng)，禁用當(dāng)前標(biāo)簽的事件，只有切換其他 tab 的時(shí)候，才重新請求新的數(shù)據(jù)。
pointer-events 是一個(gè)用于 HTML 指針事件的屬性。
pointer-events 可以禁用 HTML 元素的 hover/focus/active 等動態(tài)效果。
默認(rèn)值為 auto ，語法： pointer-events: auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all;
代碼
.active{ pointer-events: none; }最終效果
好像沒什么效果:joy:
7、 CSS 如何實(shí)現(xiàn)文字兩端對齊
需求
紅框所在的文字有四個(gè)字的、三個(gè)字的、兩個(gè)字的，如果不兩端對齊可以選擇居中對齊，或者右對齊。但是如果要想文字兩端對齊呢？
代碼
姓名手機(jī)號碼驗(yàn)證碼賬號密碼div{ margin:10px 0; width:100px; border:1px solid red; text-align-last: justify; }最終效果
8、使用 :not() 去除導(dǎo)航上不需要的屬性
需求
有時(shí)候?qū)Ш綑谛枰g需要用逗號,進(jìn)行隔離，但是最后一個(gè)不需要
代碼
li{ list-style:none; margin-bottom:10px; display:inline-block; } ul > li:not(:last-child)::after { content: ","; }當(dāng)然，你可以使用 .nav li + li (不包括第一個(gè)li) 或者 .nav li:first-child ~ li (不包括最后一個(gè)li)， 但是使用 :not() 的意圖特別清晰， CSS 選擇器按照人類描述它的方式定義邊框。
最后效果
或者，你已經(jīng)學(xué)習(xí)了一些關(guān)于 使用 :not()，你還可以嘗試：
/* 選擇1到3的元素并顯示 */ li:not(:nth-child(-n+3)){ display: none; }9、移動web頁面支持彈性滾動
需求
在IOS機(jī)型中，非body元素的滾動條會非常不流暢，又不想用JS模擬滾動條。
傳統(tǒng) pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出現(xiàn)滾動條拖動顯示溢出的內(nèi)容，而移動 web 開發(fā)中，由于瀏覽器廠商的系統(tǒng)不同、版本不同，導(dǎo)致有部分機(jī)型尤其是 IOS 機(jī)型不支持彈性滾動，從而在開發(fā)中制造了所謂的 BUG 。
代碼
body{ -webkit-overflow-scrolling: touch; /* ios5+ */ } ele{ overflow:auto; }-webkit-overflow-scrolling 屬性具有繼承效果，所以在 body 上設(shè)置即可，這樣局部滾動條就非常的流暢了。
最終效果
所有滾動條都相當(dāng)?shù)牧鲿沉?/p>
10、美化瀏覽器自帶的 radio ， checkbox 屬性
需求
設(shè)計(jì)師：你那個(gè)單選框按鈕好丑啊，跟我的設(shè)計(jì)稿差好遠(yuǎn)。程序員：我有什么辦法，瀏覽器就是這樣的。
記得剛開始寫頁面時(shí)候，被瀏覽器各種默認(rèn)的 UI 樣式惡心到了，當(dāng)初確實(shí)也沒啥辦法，反正也不影響功能，就那樣吧。
先講一下原理：checkbox hack技術(shù)
我們使用 CSS 一些特殊的選擇器，然后配合單選框以及復(fù)選框自帶的一些特性，可以實(shí)現(xiàn)元素的顯示隱藏效果。然后通過一些簡單的擴(kuò)展，我們可以不使用任何 JavaScript 代碼實(shí)現(xiàn)類似：自定義的單復(fù)選框，“更多”展開與收起效果，選項(xiàng)卡切換效果，或是多級下拉列表效果等等。
相信很多前端開發(fā)人員都會遇到 boss 讓修改 checkbox 和 radio 樣式，畢竟自帶的樣式太丑了。后來我們發(fā)現(xiàn)修改自帶樣式并不是那么容易，最后直接使出殺手锏——點(diǎn)擊之后替換圖片。
今天教大家一種方法，不用替換圖片，隨意修改樣式。
先講一下原理：兩個(gè)關(guān)鍵東東，一是偽類選擇器 :checked ，表示對應(yīng)控件元素（單選框或是復(fù)選框）選中時(shí)的樣式；二就是加號 + 相鄰兄弟選擇器，這個(gè)符號表示選擇后面的兄弟節(jié)點(diǎn)。于是，兩者配合，就可以輕松自如控制后面元素的顯示或者隱藏，或是其他樣式了。
而如何讓單復(fù)選框選中和不選中了，那就是 label 標(biāo)簽了哈， for 屬性錨定對應(yīng)的單選框或是復(fù)選框，然后點(diǎn)擊這里的 label 標(biāo)簽元素的時(shí)候，對應(yīng)的單復(fù)選框就會選中或是取消選中。然后，就有上面的效果啦！
代碼
這里只給一個(gè) radio 單選框的代碼,僅供參考:
.radio-beauty-container { font-size: 0; $bgc: green; %common { padding: 2px; background-color: $bgc; background-clip: content-box; } .radio-name { vertical-align: middle; font-size: 16px; } .radio-beauty { width: 18px; height: 18px; box-sizing: border-box; display: inline-block; border: 1px solid $bgc; vertical-align: middle; margin: 0 15px 0 3px; border-radius: 50%; &:hover { box-shadow: 0 0 7px $bgc; @extend %common; } } input[type="radio"]:checked+.radio-beauty { @extend %common; } }最終效果
美化radio單選框在線預(yù)覽地址： 點(diǎn)擊我呀
美化checkbox復(fù)選框在線預(yù)覽地址： 點(diǎn)擊我呀
更多關(guān)于這方面的介紹和例子可以參看 張鑫旭 大神的這篇文章： CSS radio/checkbox單復(fù)選框元素顯隱技術(shù)
11、改變 input 焦點(diǎn)光標(biāo)的顏色
需求
設(shè)計(jì)師覺得默認(rèn)的光標(biāo)顏色有點(diǎn)與整體設(shè)計(jì)風(fēng)格不符合，有點(diǎn)突兀，想換成紅色的
代碼
input { caret-color: auto; display: block; margin-bottom: .5em; } input.custom { caret-color: red; }最終效果
12、 rem 布局不再使用 JavaScript 設(shè)置
這里不探討 rem 的原理以及細(xì)節(jié)，還不熟悉的童鞋建議去惡補(bǔ)一下。
需求
有時(shí)候，移動端用 rem 布局時(shí)候，根據(jù)不同的屏幕寬度要設(shè)置不同的 font-size 來做到適配，要寫一坨 JS 來設(shè)置，能不能不用JS呢？
例如：以 750px 設(shè)計(jì)稿作為基準(zhǔn)，根節(jié)點(diǎn)設(shè)置 font-size 為 100px ,只考慮 DPR 為 2 的情況，只考慮最簡單的情況
document.querySelector('html').style.fontSize = `${window.innerWidth / 7.5 }px`;代碼
現(xiàn)在移動端 css3 單位 vw , wh 兼容性已經(jīng)很不錯(cuò)了，在不需要兼容太低版本的安卓機(jī)情況下可以這樣來：
html{ font-size: 100vw / 750 }最終結(jié)果
就這么簡單的設(shè)置， rem 就可以使用了
13、利用 transparent 屬性實(shí)現(xiàn)各種三角形，提示框
需求
在不使用圖片的情況，實(shí)現(xiàn)一個(gè)簡單的三角形箭頭
代碼
#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }最終效果
復(fù)雜點(diǎn)的話，同樣的原理還可以實(shí)現(xiàn)一個(gè) 五角星 ，原理都是利用 transparent 的透明屬性。
14、讓網(wǎng)站所有圖片變成黑白色彩的
需求
記得2008年時(shí)候汶川大地震時(shí)候，很多網(wǎng)站圖片都變成黑白色彩悼念逝者
代碼
img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }最終效果
15、實(shí)現(xiàn)文字的波浪線效果
需求
實(shí)現(xiàn)文字波浪線的強(qiáng)調(diào)效果，如圖所示
相信大家對于 text-decoration 這個(gè)屬性并不陌生，在重置 a 標(biāo)簽的默認(rèn)樣式時(shí)，我們經(jīng)常要這樣寫： text-decoration: none; 可能對它了解的人也很少，實(shí)際上 text-decoration 是一個(gè)復(fù)合屬性，由 line 、 style 和 color 組成。
所以我們可以實(shí)現(xiàn)這樣的效果：
可惜的是 line 只有 underline (下劃線)、 overline (上劃線)和 line-through (刪除線)。如果突然需要下劃波浪線，怎么辦呢？不要急，神奇的 CSS 會幫你做到的。首先，你需要先了解一下 漸變的使用技巧 。
說一下這里的思路，我們首先要用兩段漸變構(gòu)造一個(gè)基本元素：'X'(這里我就不放圖了)，下一步就比較重要了，我們要截取'X'的上半部分，得到一個(gè)'V',從而結(jié)合 repeat 形成波浪線。下面是用 scss 寫的一個(gè) mixin ，方便以后使用。
代碼
@mixin waveline($color,$h) { position: relative; &::after { content: ''; display: block; position: absolute; top: 100%; left: 0; width: 100%; height: $h; background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%); background-size: $h * 2 $h * 2; } }最終效果
兼容性
這些技巧在當(dāng)前版本的 Chrome ， Firefox ， Safari ， 以及 Edge ， 和 IE11 可以工作，移動端基本都沒問題， IE 重度開發(fā)者慎用。
相關(guān)兼容性自行查找： https://caniuse.com/
推薦一波
有趣的 GitHub 倉庫
國服第一切圖仔的 CSS 倉庫：你想知道的 CSS 奇技淫巧，在這里，都有。 iCSS -- interesting css
張鑫旭老師的博客
前端技術(shù)
受益頗多，所以推薦一波。:joy:
本文名稱：CSS黑魔法小技巧，讓你少寫不必要的JS，代碼更優(yōu)雅
網(wǎng)站路徑：http://www.jiaotiyi.com/article/dpgddpg.html