SS中的偽類真是個(gè)神奇的東西，有時(shí)要實(shí)現(xiàn)某些布局的時(shí)候菜鳥都是div套div，實(shí)在不行上flex，而高手一般都是用最少的元素來(lái)實(shí)現(xiàn)效果，比如巧妙的運(yùn)用偽類來(lái)達(dá)到目的的同時(shí)減少元素節(jié)點(diǎn)，代碼清爽了很多不用再寫一坨div。

這不，最近學(xué)習(xí)了幾招偽類的使用，特此記錄下。

列表最后一行左對(duì)齊

flex布局中，最后一行個(gè)數(shù)不滿的情況：

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

最后一行不足4個(gè)：

<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>

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

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

效果：

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

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

文本狀態(tài)的切換

元素的展開(kāi)和收起也是會(huì)經(jīng)常遇到的，默認(rèn)收起狀態(tài)，點(diǎn)擊后就會(huì)展開(kāi)，類似于點(diǎn)擊彈出下拉菜單，只涉及到兩種狀態(tài)，也可以結(jié)合偽類實(shí)現(xiàn)：

.btn::after {
  content: '展開(kāi)'
}

#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偽類實(shí)現(xiàn)狀態(tài)的切換，換做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;
}

效果：

根據(jù)文本長(zhǎng)度自動(dòng)調(diào)整字體大小

這個(gè)就很極客了，先看看效果：

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

.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;    
}

通過(guò)使用偽類級(jí)聯(lián)能控制不同字符個(gè)數(shù)的樣式。

能實(shí)現(xiàn)的效果還有很多，很多我也不會(huì)。。。

就我自己在開(kāi)發(fā)時(shí)，很容易就把偽類這個(gè)東西拋之腦后了，下意識(shí)地習(xí)慣直接div一把梭，實(shí)現(xiàn)不了就用javascript，因?yàn)檫@種下意思的習(xí)慣成本很低，不要多加思考。其實(shí)有時(shí)候仔細(xì)想想，很多情況真的沒(méi)必要“殺雞用牛刀”，習(xí)慣也是有代價(jià)的，下意識(shí)的使用方式看起來(lái)似乎成本很低，但代碼因此變得復(fù)雜，增加了后期的維護(hù)成本和理解成本。不光是我們?cè)诰幋a的時(shí)候，生活中也是如此，遇到問(wèn)題不妨多思考，不要急于作出反饋。

參考

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

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

https://segmentfault.com/a/1190000040030723

.CSS偽類和CSS偽元素

（1）偽類和偽元素的作用

相同之處：都是為某些選擇器添加特殊的效果。不同之處：

偽類：操作DOM樹中已存在的元素，根據(jù)元素不同的狀態(tài)進(jìn)行樣式設(shè)置，在一個(gè)選擇器中可以有多個(gè)偽類；

偽元素：創(chuàng)建DOM樹之外的邏輯元素，針對(duì)元素中特定內(nèi)容進(jìn)行樣式設(shè)置，在一個(gè)選擇器中只能有一個(gè)偽元素；before和after偽元素中要有content屬性。

（2）偽類和偽元素的語(yǔ)法

1）偽類的語(yǔ)法：

/* 偽類的語(yǔ)法：*/
selector:pseudo-class {property:value;}
/* CSS類也可以使用偽類：*/
selector.class:pseudo-class {property:value;}

2）偽元素的語(yǔ)法：

/* 偽元素的語(yǔ)法：*/
selector:pseudo-element {property:value;}或 selector::pseudo-element {property:value;} 
/*CSS類也可以使用偽元素*/
selector.class:pseudo-element {property:value;}或selector.class::pseudo-element {property:value;}

（3）偽類和偽元素有哪些

1）CSS 偽類有哪些？

css偽類有6種，分別為：動(dòng)態(tài)偽類、結(jié)構(gòu)偽類、語(yǔ)言偽類、元素狀態(tài)偽類、目標(biāo)偽類、否定偽類。

a）動(dòng)態(tài)偽類

不同的狀態(tài)，使用不同的樣式。

E:link ：選擇匹配的E元素，且匹配元素被定義了超鏈接且未被訪問(wèn)過(guò)；常用于鏈接標(biāo)簽。

E:visited ：選擇匹配的E元素，且匹配元素被定義了超鏈接且已被訪問(wèn)過(guò)；常用于鏈接標(biāo)簽。

E:hover ： 選擇匹配的E元素，且用戶鼠標(biāo)停留在元素E上；常用于鏈接標(biāo)簽。

E:active ：選擇匹配的E元素，且匹配元素被激活；常用于鏈接標(biāo)簽和按鈕上。

E:focus ： 選擇匹配的E元素，且匹配元素獲取焦點(diǎn)。

b）結(jié)構(gòu)偽類

E:fisrt-child ：選擇父元素的第一個(gè)子元素。與E:nth-child(1)等同。

E:last-child ：選擇父元素的最后一個(gè)子元素。與E:nth-last-child(1)等同。

E:root ：選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html，此時(shí)該選擇器與html類型選擇器匹配的內(nèi)容相同。

E F:nth-child(n)：選擇父元素E的第n個(gè)子元素F。其中n可以是整數(shù)（1，2，3）、關(guān)鍵字（even，odd）、可以是公式（2n+1）,而且n值起始值為1，而不是0。

E F:nth-last-child(n)：選擇父元素E的倒數(shù)第n個(gè)子元素F。

E:nth-of-type(n) ：選擇父元素內(nèi)具有指定類型的第n個(gè)E元素。

E:nth-last-of-type(n)：選擇父元素內(nèi)具有指定類型的倒數(shù)第n個(gè)E元素。

E:first-of-type：選擇父元素內(nèi)具有指定類型的第一個(gè)E元素，與E:nth-of-type(1)等同。

E:last-of-tye ：選擇父元素內(nèi)具有指定類型的最后一個(gè)E元素，與E:nth-last-of-type(1)等同。

E:only-child ：選擇父元素只包含一個(gè)子元素，且該子元素匹配E元素。

E:only-of-type：選擇父元素只包含一個(gè)同類型子元素，且該子元素匹配E元素。

E:empty： 選擇沒(méi)有子元素的元素，而且該元素也不包含任何文本節(jié)點(diǎn)。

結(jié)構(gòu)偽類選擇器，可以根據(jù)元素在文檔中所處的位置，來(lái)動(dòng)態(tài)選擇元素，從而減少HTML文檔對(duì)ID或類的依賴，有助于保持代碼干凈整潔。

c）語(yǔ)言偽類

E: lang(language)：用來(lái)匹配使用指定語(yǔ)言的元素。

d）元素狀態(tài)偽類

E:checked：匹配每個(gè)選中的輸入元素（僅適用于單選按鈕或復(fù)選框）。

E:enabled：匹配每個(gè)啟用的的元素（主要用于表單元素）。

E:disabled：匹配每個(gè)禁用的的元素（主要用于表單元素）。

e）目標(biāo)偽類

E:target：選擇匹配E的所有元素，且匹配元素被相關(guān)URL指向。是用來(lái)改變頁(yè)面中錨鏈接URL所指向的ID元素的樣式。

f）否定偽類

E:not(F)：匹配所有除F元素外的E元素

2）CSS 偽元素有哪些？

::after (:after) 在選中元素中創(chuàng)建一個(gè)后置的子節(jié)點(diǎn)

::before (:before) 在選中元素中創(chuàng)建一個(gè)前置的子節(jié)點(diǎn)

::first-line (:first-line) 選取文字塊首行字符

::first-letter (:first-letter) 選取文字塊首行首個(gè)字符

::selection 選取文檔中高亮(反白)的部分

::placeholder 選取字段的占位符文本(提示信息)

::marker 選取列表自動(dòng)生成的項(xiàng)目標(biāo)記符號(hào)

::backdrop 匹配全屏模式下的背景

::slotted() 用于選定那些被放在 HTML模板 中的元素

::inactive-selection 選取非活動(dòng)狀態(tài)時(shí)文檔中高亮(反白)的部分

#學(xué)問(wèn)分亨官##閃光時(shí)刻二期##閃光時(shí)刻第二期主題征文#

a:link{color:red}a:visited{color:green}a:hover{color:blue}a:active{color:orange}