再次認識CSS中的偽類

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

.CSS偽類和CSS偽元素

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

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

偽類：操作DOM樹中已存在的元素，根據元素不同的狀態進行樣式設置，在一個選擇器中可以有多個偽類；

偽元素：創建DOM樹之外的邏輯元素，針對元素中特定內容進行樣式設置，在一個選擇器中只能有一個偽元素；before和after偽元素中要有content屬性。

（2）偽類和偽元素的語法

1）偽類的語法：

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

2）偽元素的語法：

/* 偽元素的語法：*/
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種，分別為：動態偽類、結構偽類、語言偽類、元素狀態偽類、目標偽類、否定偽類。

a）動態偽類

不同的狀態，使用不同的樣式。

E:link ：選擇匹配的E元素，且匹配元素被定義了超鏈接且未被訪問過；常用于鏈接標簽。

E:visited ：選擇匹配的E元素，且匹配元素被定義了超鏈接且已被訪問過；常用于鏈接標簽。

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

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

E:focus ：選擇匹配的E元素，且匹配元素獲取焦點。

b）結構偽類

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

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

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

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

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

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

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

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

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

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

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

E:empty：選擇沒有子元素的元素，而且該元素也不包含任何文本節點。

結構偽類選擇器，可以根據元素在文檔中所處的位置，來動態選擇元素，從而減少HTML文檔對ID或類的依賴，有助于保持代碼干凈整潔。

c）語言偽類

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

d）元素狀態偽類

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

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

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

e）目標偽類

E:target：選擇匹配E的所有元素，且匹配元素被相關URL指向。是用來改變頁面中錨鏈接URL所指向的ID元素的樣式。

f）否定偽類

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

2）CSS 偽元素有哪些？

::after (:after) 在選中元素中創建一個后置的子節點

::before (:before) 在選中元素中創建一個前置的子節點

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

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

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

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

::marker 選取列表自動生成的項目標記符號

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

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

::inactive-selection 選取非活動狀態時文檔中高亮(反白)的部分

#學問分亨官##閃光時刻二期##閃光時刻第二期主題征文#

么是偽類？

偽類對元素進行分類是基于特征(characteristics)而不是它們的名字、屬性或者內容；原則上特征是不可以從文檔樹上推斷得到的。

偽類有：:first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first何為偽類?就是css內植類css內部本身賦予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿來使用，當然你也可以改變它的部分屬性比如：a:link{color:#FF0000;}CSS很多的建議并沒有得到瀏覽器的支持，但有四個可以安全用在超鏈接上的偽類。

偽類有什么作用？

CSS很多的建議并沒有得到瀏覽器的支持，但有四個可以安全使用的用在連接上的CSS偽類。

◆link用在為訪問的連接上。

◆visited用在已經訪問過的連接上。

◆hover用于鼠標光標置于其上的連接。

◆active用于獲得焦點(比如，被點擊)的連接上。

例如：

ExampleSourceCode

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

整合營銷服務商