CSS中利用偽類、偽元素和相鄰元素選擇器的技巧有哪些

CSS中利用偽類、偽元素和相鄰元素選擇器的技巧有哪些，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

前幾天遇到一個頁面需求是這樣的：

一個評論框，后面的按鈕有點贊或者發(fā)送評論兩種狀態(tài)，其中發(fā)送按鈕有根據(jù)輸入框中是否有字分為可點擊和不可點擊兩種狀態(tài)。

需求：

沒有文字，沒有聚焦——點贊

沒有文字，聚焦——灰色發(fā)送

有文字——紅色發(fā)送

如果用JS實現(xiàn)，需要監(jiān)聽輸入框的change和focus事件，比較麻煩。但是用CSS中的偽類就可以實現(xiàn)相近效果。

<input type="text" class="input" required>  <div class="like">點贊</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元素實現(xiàn)，可以用:empty偽類代替:valid。)

所以CSS3中的偽類和偽元素非常多，其中一些如果用的巧妙，可以實現(xiàn)很多原本需要JS才可以實現(xiàn)的效果。

contenteditable屬性的div的placeholder

因為一些原因，我們有時候用帶有contenteditable屬性的div而不是input或者textarea來作為輸入框。比如，div可以根據(jù)內(nèi)容自動調(diào)整高度。但是div元素不支持placeholder屬性。怎么在div內(nèi)容為空的時候顯示一個默認文字呢?可以利用:empty偽類。

<div class="input" contenteditable placeholder="請輸入文字"></div>

.input:empty::before {    content: attr(placeholder);  }

畫格子

這個是在美團的移動端頁面上看到的：

我們需要在城市列表這個區(qū)域畫一個格子。我們當然首先想到的是用border屬性，但是設計師有個要求是，如果***一行只有一個或者兩個城市，為了美觀后面也要有空白的格子。像這樣子：

美團的頁面中，格子的豎線是怎么畫的呢?是用::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)造了兩個高度為100%的偽元素，利用它們的邊框作為表格的豎線。這種方案可以實現(xiàn)設計師的要求，又不會增加空白的頁面元素，破壞語義。但是局限性就是最多只能畫四條豎線，也就是說表格最多有5列。

Tab切換

純CSS實現(xiàn)Tab切換也是可以的。主要是利用了單選框元素的:checked偽類和相鄰選擇器。因為是單選框，所以保證了同一時間只有一個tab處于激活狀態(tài)。如果不要求更復雜的效果，這樣純CSS實現(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元素來代替單選框、復選框等表單元素的本身，因為為表單元素本身定義樣式十分困難。

感知子元素的個數(shù)

這個是我看過的最復雜的一個技巧之一，來自這篇文章，不依靠JS實現(xiàn)了根據(jù)子元素的個數(shù)來應用不同的樣式。

比如這樣的CSS：

.list li:nth-last-child(n+4) ~ li, .list li:nth-last-child(n+4):first-child {   color: red }

可以實現(xiàn)這樣的效果：如果.list里面li元素個數(shù)大于等于4，則顯示為紅色。

這是怎么實現(xiàn)的呢?

:nth-last-child(n+4)這一個選擇器的意思就是倒數(shù)第四個以及之前的元素，后面加了~  li，就是表示符合前面條件的元素之后的li元素。

如果元素總數(shù)不足4，則不會存在符合:nth-last-child(n+4)的元素(一共沒有四個，也就不存在倒數(shù)第四個)，那么li:nth-last-child(n+4)  ~ li就不會選擇任何的元素了。

但是如果只用~ li，是不會匹配到那個li的，所以又加上了li:nth-last-child(n+4):first-child。

這樣也就實現(xiàn)了根據(jù)元素個數(shù)的多少來應用不同的樣式。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。