CSS結構性偽類詳解

擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

今天來給大家列一下所有常用的結構性偽類的用法。其中大部分應該都用的很熟悉了

1. 匹配文檔的根元素

：root

2. 匹配其父元素的第n個子元素

：nth-child(n)

3. 匹配其父元素倒數第n個子元素

：nth-last-child(n)

4. 匹配其父元素第n個有著相同選擇器的子元素

：nth-of-type(n)

5. 匹配其父元素倒數第n個有著相同選擇器的子元素

：nth-last-of-type(n)

6. 匹配其父元素的第一個子元素

：first-child

7. 匹配其父元素的最后一個子元素

：last-child

8. 匹配其父元素第一個有著相同選擇器的子元素

：first-of-type

9. 匹配其父元素最后一個有著相同選擇器的子元素

：last-of-type

10. 匹配其父元素的唯一子元素

：only-child

11. 匹配其父元素的唯一有著相同選擇器的子元素

：only-of-type

12. 匹配沒有子元素（包括文字節點）的元素

：empty

以上選擇器中的n也可以寫成表達式an+b，其中a和b是0或正整數，如2n、2n+1、4n+1等。

n是從0開始的整數，表達式的寫法相當于把每a個子元素分成一組，取每組的第b個元素。比如2n表示匹配所有順序是2的倍數的子元素。2n和2n+1也可以分別寫成even和odd。表示第偶數，奇數個子元素。

再說一個：nth-child(n)和：nth-of-type(n)的區別。

：nth-child(n)表示其父元素的每n個子元素，無論其子元素的類別是什么。

：nth-of-type(n)表示的是同類別的第n個子元素。

具體可以參考我之前寫過的文章。

CSS中的六種偽類選擇器

區別這兩個偽類原來這么簡單

看到這篇，CSS命名從此不在糾結

CSS隱藏的秘密

正確使用CSS中的關鍵字unset

聽說CSS可以寫tab切換，我也來試一把

教你如何用CSS簡單實現一個水果loading效果

天我們學習的內容有：過渡，動畫，轉換，伸縮盒子。

可以說今天學習的內容都是重量級的大佬，學好了，使用css3做出酷炫的效果 So Easy！~~

1.過渡

在css3中，有一個屬性可以設置過渡效果。

它就是transition，所謂的過渡效果，指的就是以動畫的形式慢慢演化樣式屬性變化的過程。

A.案例：通過transition設置焦點過渡效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>

注意頁面中的代碼：

第一，我們給div添加了一個hover偽類樣式，當我們鼠標懸停在div上方的時候，會給div盒子添加一個藍色的盒子陰影。

第二，我們給div盒子添加了一個transition樣式，設置的值為：all 1s linear 0.3s;

這四個數據分別對應

transition-property(需要過渡的屬性)：如果設置為all表示所有樣式屬性都需要過渡。

transition-duration(過渡的時間):以秒作為單位，設置過渡的時間

transition-timing-function(過渡的方式):常用的有linear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等

transition-delay(延遲的時間):以秒作為單位進行延遲，延遲之后開始進行過渡效果。

所以，我們通過transition這個復合屬性設置的過渡效果為：

all:需要過渡所有的屬性

1s:過渡的時間為1秒

linear:勻速過渡

0.3s:在延遲0.3秒之后開始過渡動畫。

如果大家理解了上面的描述，那么也就不難理解咱們鼠標放到div上之后，為啥會慢慢出現藍色的光暈了，就是因為咱們添加了過渡，所以，慢慢的就會給盒子添加陰影效果。

2.動畫：

在學習完了過渡之后，發現咱們可以使用transition去以動畫的形式展示樣式的改變以及變化的過程，這可以幫助我們來實現一些過渡的動畫。

但是，有的時候，我們的需求會更加的復雜，要求會更加的多變，那么，transition可能就無法滿足我們的需要了，我們需要有更加炫酷，復雜的效果呈現。

那么，動畫animation就可以滿足我們的需要。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>

代碼效果如下：

同樣，讓我們來關注編寫的代碼：

1.在樣式中，首先我們使用@keyframes 來定義了一個復雜的動畫，在css3中，新增了@keyframes可以來幫助我們添加動畫。代碼如下：

/*動畫的名字叫做moveAndChange*/

@keyframes moveAndChange{

/*動畫最初的時候，將left設置為0px，top設置為0px*/

0%{

left:0px;

top:0px;

}

/*當動畫進行到25%的時候，使用動畫將left過渡到200px，top過渡到200px，

背景顏色過渡為綠色，圓角過渡為0(無圓角)*/

25%{

left:200px;

top:200px;

background:green;

border-radius: 0;

}

/*當動畫進行到50%的時候，使用動畫將left過渡到400px，top過渡到200px，

背景顏色過渡為藍色，圓角過渡為50%(正圓)*/

50%{

left:400px;

top:200px;

background:blue;

border-radius: 50%;

}

/*當動畫進行到75%的時候，使用動畫將left過渡到400px，top過渡到0，

背景顏色過渡為灰色，圓角過渡為0(無圓角)*/

75%{

left:400px;

top:0px;

background:#ccc;

border-radius: 0;

}

/*當動畫結束的時候，使用動畫將left過渡到0x，top過渡到0px，

背景顏色過渡為紅色，圓角過渡為50%(正圓)*/

100%{

left:0px;

top:0px;

background:red;

border-radius: 50%;

}

這是一個比較復雜的動畫效果，可以發現，它通過百分比的形式將一個完整的動畫拆分成了5個部分，每個部分都有不同的樣式效果，而當我們采用該動畫的元素就會按照設置的順序和樣式效果進行動畫的過渡和展示。

2.上面我們只是通過@keyframes創建了一個動畫，我們還需要通過特定的語法來使用這個動畫。

就是下面這句代碼了：

animation: moveAndChange 5s linear 0.5s infinite normal;

它是一個復合屬性，設置了6個值，分別對應：

animation-name(設置動畫的名稱)：用來設置動畫的名字，我們這里寫的是moveAndChange ，也就是說我們就是要使用我們剛剛創建的動畫。

animation-duration(設置整個動畫的時間):以秒作為單位，我們這里寫的是5s，表示整個動畫的時間為5秒

animation-timing-function(設置播放動畫的方式)：播放動畫的方式，常用的有linear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我們使用的是linear勻速播放動畫。

animation-delay(設置動畫的延遲):以秒作為單位，我們寫的是0.5s，表示延遲0.5秒之后開始播放動畫。

animation-iteration-count(設置動畫播放的次數):播放動畫的次數，我們這里寫的是infinite ，表示動畫將會被播放無限次，如果寫數字，那么就會播放數字對應的次數。

animation-direction(設置是否反向播放動畫)：我們寫的是normal，表示正常播放動畫，如果寫的是

alternate則表示要反向播放動畫，大家也可以自己試一試這個效果。

最終，我們通過@keyframes創建動畫，通過animation設置動畫，成功完成了這個復雜的動畫效果。

3.轉換

在css3中，我們通過transform屬性可以設置元素的轉換效果，具體的效果如下：

A.平移

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來div盒子的位置是left:0,top:0;

但是我們通過transform: translate(300px,300px);將盒子進行了偏移，所以，盒子的位置發生了改變。

B.旋轉

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來div盒子應該是四四方方的。

但是，經過我們的代碼transform: rotate(45deg); //deg為單位，表示度數。

進行了45度的旋轉之后，呈現出來的就是一個菱形的盒子了，旋轉的正方向為順時針，負方向為逆時針。

C.縮放

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來盒子的寬高為200*200,而我們通過transform: scale(0.5,0.25);進行的縮放

scale的第一個參數為0.5,表示橫向縮小為0.5倍

scale的第二個參數為0.25，表示縱向縮小為0.25倍。

scale的參數如果為1，則表示不進行任何縮放，小于1就是做縮小，而大于1表示做放大。

小結：transform轉換中其實還包含了skew(傾斜)，matrix(矩陣轉換)，相對來說用到的不是特別多，所以在本文中我們便不再做介紹。

4.flex布局

Flex布局，可以簡便、完整、響應式地實現各種頁面布局。

Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

代碼效果如下：

如圖所示，咱們通過display:flex將.parent元素設置為了flex盒子，那么子元素將會按照justify-content設置的方式進行元素的排列，目前看來，和我們沒有設置flex盒子的效果是一致的。

接下來我們更改一下，將justify-content設置為flex-end，效果如下圖所示：

所以我們就應該發現，flex-start是讓所有的子元素從父元素的左側開始排列

而flex-end是讓所有的子元素從元素的右側開始排列。

我們再來更改一下，將justify-content設置為center，效果如下圖所示：

更厲害了，子元素在父盒子的中央位置排列顯示了。

然后，我們再將justify-content設置為space-around，效果如下圖所示：

它是平均分配的形式為每一個子元素設置了間距，但是看起來有點變扭。

所以我們推薦將justify-content設置為space-between，效果如下圖：

我們還可以通過flex-wrap來設置子元素是否換行顯示，以及flex-direction設置子元素排列的順序。

這兩個屬性可以設置的值如下：

flex-wrap: nowrap;//不換行，會自動收縮

flex-wrap: warp;//換行，會自動收縮

flex-wrap: warp-reverse;//反轉，從默認的從上到下排列反轉為從下到上。

flex-direction:row; //從左至右一行一行進行子元素的排列

flex-direction:column; //從上到下一列一列進行子元素的排列

flex-direction:row-reverse; //從右至左一行一行進行子元素的排列

flex-direction:column-reverse; //從下到上一列一列進行子元素的排列

案例代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>

我們設置了flex-wrap: nowrap;（不換行，壓縮所有的子元素在一行中顯示），以及flex-direction: row-reverse;（反向排列）

代碼效果如下：

如果設置為flex-wrap: warp（換行顯示無法在一行顯示的子元素），則效果如下：

如果將flex-direction: column;,則會縱向排列元素，效果如下圖：

除了上面的這些給伸縮盒子父元素設置的樣式之外，我們還可以可以伸縮盒子的子元素設置flex屬性，用來設置平均分配整個父盒子的空間。

代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下：

如上圖所示，每個盒子平均分配了父盒子的空間，原本寬度為20%，現在被拉伸了。

除此之外，咱們還可以使用flex屬性進行進一步的設置，代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下圖：

我們分別給四個子盒子設置了flex:1 , flex:2, flex:2 ,flex:1.

這是什么意思呢？

四個flex加起來一共是6.那么第一個盒子就占據整個父盒子的1/6寬度。

同理，另外三個盒子分別占據2/6,2/6,1/6的寬度，所以就形成了我們現在看到的效果。

原文來源于：黑馬程序員社區

學習資源：

想學習css，可以關注：黑馬程序員頭條號，后臺回復：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

在線咨詢

上一篇：Vue進階（幺肆玖）：Vue中template標簽
下一篇：網頁內容抓取工具-網站采集工具-免費網站抓取工具（附

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS結構性偽類詳解

列表最后一行左對齊

文本狀態的切換

生成箭頭

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

參考

您的項目需求