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

BigNerdCoding 發布于2019-08-29 11:25 / 2501人閱讀

摘要：像這樣子美團的頁面中，格子的豎線是怎么畫的呢是用和元素畫的。主要是利用了單選框元素的偽類和相鄰選擇器。另外利用表單元素的偽類，可以元素來代替單選框復選框等表單元素的本身，因為為表單元素本身定義樣式十分困難。

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

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

需求：
沒有文字，沒有聚焦——點贊
沒有文字，聚焦——灰色發送
有文字——紅色發送

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


點贊
發送

.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元素實現，可以用:empty偽類代替:valid。）

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

contenteditable屬性的div的placeholder

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

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

畫格子

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

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

美團的頁面中，格子的豎線是怎么畫的呢？是用::after和::before元素畫的。

.table:before {
  content: "";
  position: absolute;
  width: 25%;
  left: 25%;
  height: 100%;
  border-left: 1px solid #ffffd8ce;
  border-right: 1px solid #ffffd8ce;
}

.table:after {
  content: "";
  position: absolute;
  width: 10%;
  left: 75%;
  height: 100%;
  border-left: 1px solid #ffffd8ce;
  border-right: none;
}

分別創造了兩個高度為100%的偽元素，利用它們的邊框作為表格的豎線。這種方案可以實現設計師的要求，又不會增加空白的頁面元素，破壞語義。但是局限性就是最多只能畫四條豎線，也就是說表格最多有5列。

Tab切換

純CSS實現Tab切換也是可以的。主要是利用了單選框元素的:checked偽類和相鄰選擇器。因為是單選框，所以保證了同一時間只有一個tab處于激活狀態。如果不要求更復雜的效果，這樣純CSS實現的tab切換效果，要比JS簡單可靠很多。

  
  TAB1
  
  TAB2

  CONTENT1  
  CONTENT2

  input, .tab-content{
    display: none;
  }
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

另外利用表單元素的偽類，可以label元素來代替單選框、復選框等表單元素的本身，因為為表單元素本身定義樣式十分困難。

感知子元素的個數

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

比如這樣的CSS：

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

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

這是怎么實現的呢？

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

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

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

這樣也就實現了根據元素個數的多少來應用不同的樣式。

GPU云服務器云服務器偽元素獲取偽元素 css元素元素選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111642.html

CSS選擇器（CCS第三版）

摘要：元素選擇器針對元素的選擇器，用于尋找指定的元素。通用選擇器通用選擇器可設置全部的元素，由一個表示。使用表示偽類選擇器。偽類選擇器包含兩種狀態偽類和結構偽類。層疊規定了選擇器的特殊性，將特殊性分為，，，四個登記，各等級特殊性逐漸降低即。什么是選擇器？ showImg(https://segmentfault.com/img/remote/1460000016763315?w=784&h...

dabai 2019-08-29 17:02 評論0 收藏0
CSS選擇器（CCS第三版）

摘要：元素選擇器針對元素的選擇器，用于尋找指定的元素。通用選擇器通用選擇器可設置全部的元素，由一個表示。使用表示偽類選擇器。偽類選擇器包含兩種狀態偽類和結構偽類。層疊規定了選擇器的特殊性，將特殊性分為，，，四個登記，各等級特殊性逐漸降低即。什么是選擇器？ showImg(https://segmentfault.com/img/remote/1460000016763315?w=784&h...

Flink_China 2019-08-02 11:46 評論0 收藏0
善用CSS偽類，不用JS也能做出選項卡功能

摘要：取決于你的高度咦還是不能動因為我們還需要運用的兩個重要技巧偽類和通用兄弟元素選擇器，才能讓選項卡與內容塊做切換。加入偽類與通用兄弟元素選擇器我們為加上偽類，表示當這個被選中時等于對應的標簽被選中使才會呈現的樣式。先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例頁面講到選項卡（...

XUI 2019-08-26 13:49 評論0 收藏0
善用CSS偽類，不用JS也能做出選項卡功能

摘要：取決于你的高度咦還是不能動因為我們還需要運用的兩個重要技巧偽類和通用兄弟元素選擇器，才能讓選項卡與內容塊做切換。加入偽類與通用兄弟元素選擇器我們為加上偽類，表示當這個被選中時等于對應的標簽被選中使才會呈現的樣式。先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例頁面講到選項卡（...

levius 2019-08-30 10:55 評論0 收藏0
善用CSS偽類，不用JS也能做出選項卡功能

摘要：取決于你的高度咦還是不能動因為我們還需要運用的兩個重要技巧偽類和通用兄弟元素選擇器，才能讓選項卡與內容塊做切換。加入偽類與通用兄弟元素選擇器我們為加上偽類，表示當這個被選中時等于對應的標簽被選中使才會呈現的樣式。先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例頁面講到選項卡（...

luoyibu 2019-08-02 15:07 評論0 收藏0