一、評論框
一個(gè)評論框，后面的按鈕有點(diǎn)贊或者發(fā)送評論兩種狀態(tài)，其中發(fā)送按鈕有根據(jù)輸入框中是否有字分為可點(diǎn)擊和不可點(diǎn)擊兩種狀態(tài)。
實(shí)戰(zhàn)需求：
沒有文字，沒有聚焦——點(diǎn)贊
沒有文字，聚焦——灰色發(fā)送
有文字——紅色發(fā)送
如果用JS實(shí)現(xiàn)，需要監(jiān)聽輸入框的change和focus事件，比較麻煩。但是用CSS中的偽類就可以實(shí)現(xiàn)相近效果。
<input type="text" class="input" required><div class="like">點(diǎn)贊</div><div class="send">發(fā)送</div>
.send { display: none;
}.input:focus ~ .send { display: block;
}.input:valid ~ .send { display: block; color: red;
}.input:focus ~ .like, .input:valid ~ .like { display: none;
}
（如果評論框用contenteditable屬性的div元素實(shí)現(xiàn)，可以用:empty偽類代替:valid。）
所以CSS3中的偽類和偽元素非常多，其中一些如果用的巧妙，可以實(shí)現(xiàn)很多原本需要JS才可以實(shí)現(xiàn)的效果。
contenteditable屬性的div的placeholder
因?yàn)橐恍┰?，我們有時(shí)候用帶有contenteditable屬性的div而不是input或者textarea來作為輸入框。比如，div可以根據(jù)內(nèi)容自動(dòng)調(diào)整高度。但是div元素不支持placeholder屬性。怎么在div內(nèi)容為空的時(shí)候顯示一個(gè)默認(rèn)文字呢？可以利用:empty偽類。
<div class="input" contenteditable placeholder="請輸入文字"></div>
.input:empty::before { content: attr(placeholder);
}
二、畫格子
這個(gè)是在美團(tuán)的移動(dòng)端頁面上看到的：
項(xiàng)目需求：
我們需要在城市列表這個(gè)區(qū)域畫一個(gè)格子。我們當(dāng)然首先想到的是用border屬性，但是設(shè)計(jì)師有個(gè)要求是，如果最后一行只有一個(gè)或者兩個(gè)城市，為了美觀后面也要有空白的格子。像這樣：
美團(tuán)的頁面中，格子的豎線是怎么畫的呢？是用::after和::before元素畫的。
.table:before { content: ''; position: absolute; width: 25%; left: 25%; height: 100%; border-left: 1px solid #ddd8ce; border-right: 1px solid #ddd8ce;
}.table:after { content: ''; position: absolute; width: 10%; left: 75%; height: 100%; border-left: 1px solid #ddd8ce; border-right: none;
}
分別創(chuàng)造了兩個(gè)高度為100%的偽元素，利用它們的邊框作為表格的豎線。這種方案可以實(shí)現(xiàn)設(shè)計(jì)師的要求，又不會(huì)增加空白的頁面元素，破壞語義。但是局限性就是最多只能畫四條豎線，也就是說表格最多有5列。
三、Tab切換
純CSS實(shí)現(xiàn)Tab切換也是可以的。主要是利用了單選框元素的:checked偽類和相鄰選擇器。因?yàn)槭菃芜x框，所以保證了同一時(shí)間只有一個(gè)tab處于激活狀態(tài)。如果不要求更復(fù)雜的效果，這樣純CSS實(shí)現(xiàn)的tab切換效果，要比JS簡單可靠很多。
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">TAB1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">TAB2</label>
<div id="content1" class="tab-content">CONTENT1<div>
<div id="content2" class="tab-content">CONTENT2</div>
input, .tab-content{
display: none;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
display: block;
}
另外利用表單元素的偽類，可以label元素來代替單選框、復(fù)選框等表單元素的本身，因?yàn)闉楸韱卧乇旧矶x樣式十分困難。
四、感知子元素的個(gè)數(shù)
我看過一個(gè)很復(fù)雜的技巧，不依靠JS實(shí)現(xiàn)了根據(jù)子元素的個(gè)數(shù)來應(yīng)用不同的樣式。
比如這樣的CSS：
.list li:nth-last-child(n+4) ~ li,.list li:nth-last-child(n+4):first-child { color: red
}
可以實(shí)現(xiàn)這樣的效果：如果.list里面li元素個(gè)數(shù)大于等于4，則顯示為紅色。
這是怎么實(shí)現(xiàn)的呢？
:nth-last-child(n+4)這一個(gè)選擇器的意思就是倒數(shù)第四個(gè)以及之前的元素，后面加了~ li，就是表示符合前面條件的元素之后的li元素。
如果元素總數(shù)不足4，則不會(huì)存在符合:nth-last-child(n+4)的元素（一共沒有四個(gè)，也就不存在倒數(shù)第四個(gè)），那么li:nth-last-child(n+4) ~ li就不會(huì)選擇任何的元素了。
但是如果只用~ li，是不會(huì)匹配到第一個(gè)li的，所以又加上了li:nth-last-child(n+4):first-child。
這樣也就實(shí)現(xiàn)了根據(jù)元素個(gè)數(shù)的多少來應(yīng)用不同的樣式。
