文轉載自：https://blog.csdn.net/hongyu799/article/details/109114843

問題背景：

在進行頁面開發時，經常會使用:before, :after偽元素創建一些小tips，但是在:before或:after的content屬性使用中文的話，會導致某些瀏覽器上出現亂碼。

解決方案：

避免在CSS的:before, :after中使用中文，如果一定要使用，可以使用中文對應的Unicode?？梢允褂檬褂谜鹃L工具，或者是JavaScript的原生方法escape將中文轉為Unicode。

需要注意的是Unicode在CSS中的書寫方式，例如“小時”對應的Unicode是'\u5c0f\u65f6'，而在CSS中要寫成（去掉里面的u，切記切記）

SS中的偽類真是個神奇的東西，有時要實現某些布局的時候菜鳥都是div套div，實在不行上flex，而高手一般都是用最少的元素來實現效果，比如巧妙的運用偽類來達到目的的同時減少元素節點，代碼清爽了很多不用再寫一坨div。

這不，最近學習了幾招偽類的使用，特此記錄下。

列表最后一行左對齊

flex布局中，最后一行個數不滿的情況：

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}

最后一行不足4個：

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>

解決思路有很多，這里我只說一種方式：使用偽類動態計算最后一個元素的margin。比如每行有4個元素，最后一行只有3個，就計算最后一個的margin-right為“元素寬度+間隔大小”，若只有2個，則margin-right為”2個元素寬度+2個間隔大小”，以此類推，代碼如下：

.container {
    display: flex;
    /* 兩端對齊 */
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
/* 如果最后一行是3個元素 */
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2個元素 */
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

效果：

黃色部分為動態計算的margin，上面代碼最重要的就是.list:last-child:nth-child(4n - 1)，騷操作，頭一次見，稍微解釋下：

• .list:last-child:nth-child(4n - 1)：說明最后一個同時也是4n-1個，就是要么第3個元素，要么第7個元素…
• .list:last-child:nth-child(4n - 2)：說明最后一個同時也是4n-2個，就是要么第2個元素，要么第6個元素…

文本狀態的切換

元素的展開和收起也是會經常遇到的，默認收起狀態，點擊后就會展開，類似于點擊彈出下拉菜單，只涉及到兩種狀態，也可以結合偽類實現：

.btn::after {
  content: '展開'
}

#exp {
  display: none;
}

#exp:checked+.btn::after {
  content: '收起'
}

html如下：

<div class="wrap">
  <input type="checkbox" id="exp">
  <label class="btn" for="exp"></label>
</div>

效果：

這里巧妙地借助:checked偽類實現狀態的切換，換做javascript就要寫好幾行代碼。

生成箭頭

.arrow-button {
  position: relative;
  width: 180px;
  height: 64px;
  background: #f49714;
}

.arrow-button::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 64px;
  top: 0;
  right: -32px;
  background:
    linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%),
    linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%);
  background-size: 32px 32px;
  background-repeat: no-repeat;
  background-position: 0 bottom, 0 top;
}

效果：

根據文本長度自動調整字體大小

這個就很極客了，先看看效果：

這個是先效果的背后和第一個例子一樣使用了偽類級聯，同一個選擇器上使用多個偽類，核心代碼如下：

.box span {
    font-size: 40px;    
}
.box span:first-child:nth-last-child(n+13),
.box span:first-child:nth-last-child(n+13) ~ span {
    font-size: 30px;    
}
.box span:first-child:nth-last-child(n+17),
.box span:first-child:nth-last-child(n+17) ~ span {
    font-size: 20px;    
}
.box span:first-child:nth-last-child(n+25),
.box span:first-child:nth-last-child(n+25) ~ span {
    font-size: 14px;    
}

通過使用偽類級聯能控制不同字符個數的樣式。

能實現的效果還有很多，很多我也不會。。。

就我自己在開發時，很容易就把偽類這個東西拋之腦后了，下意識地習慣直接div一把梭，實現不了就用javascript，因為這種下意思的習慣成本很低，不要多加思考。其實有時候仔細想想，很多情況真的沒必要“殺雞用牛刀”，習慣也是有代價的，下意識的使用方式看起來似乎成本很低，但代碼因此變得復雜，增加了后期的維護成本和理解成本。不光是我們在編碼的時候，生活中也是如此，遇到問題不妨多思考，不要急于作出反饋。

參考

http://www.zhangxinxu.com/wordpress/?p=1514

https://www.zhangxinxu.com/wordpress/?p=8540

https://segmentfault.com/a/1190000040030723