總結常用僞類與僞元素

僞類和僞元素是爲了格式化 DOM 樹以外的信息而被引入的。

僞類

一個 CSS 僞類是以一個冒號(:)作爲前綴，被添加到一個選擇器末尾的關鍵字，可以讓指定的元素在特定的狀態呈現指定的樣式。例如 :hover，當用戶懸停在指定元素時，可以在這個狀態給指定元素添加相應的樣式，是在 DOM 樹無法描述的狀態下才能給元素添加樣式。

首先，睡覺的小喵咪上方是一些沒有亮的一些小燈泡

:first-child

:first-child 表示在一組兄弟元素中的第一個元素。

:first-child 沒有辦法點亮小燈泡

<div class="bulb-lists">
  <p>.bulb 的兄弟元素</p>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
</div>

.bulb:first-child {
  background-image: url('../assets/img/light.png')!important;
}

:first-child 點亮第一個小燈泡

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
</div>

.bulb:first-child {
  background-image: url('../assets/img/light.png')!important;
}

:first-of-type

:first-of-type表示一組兄弟元素中指定類型的第一個元素。

:first-of-type 選擇在父元素中第一個出現的 .bulb，而不管其在兄弟內的位置如何，點亮第一個小燈泡

<div class="bulb-lists">
  <p>.bulb 的兄弟元素</p>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
</div>

.bulb:first-of-type {
  background-image: url('../assets/img/light.png')!important;
}

:last-child

:last-child 表示在一組兄弟元素中的最後一個元素(類似:first-child)。
點亮最後一個小燈泡

:last-of-type

:last-of-type表示一組兄弟元素中指定類型的最後一個元素(類似:first-of-type)。
點亮最後一個小燈泡

:not

一個否定僞類，用於匹配不符合參數選擇器的元素。

 /* 點亮不含有 .not 的燈泡*/
 <div class="bulb-lists">
  <div class="bulb not"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb not"></div>
</div>

.bulb:not(.not) {
  background-image: url('../assets/img/light.png')!important;
}

:nth-child(an+b)

:nth-child這個 CSS 僞類首先會找到當前元素的兄弟元素，然後按照位置的先後順序從1開始排序，選擇的結果爲第（an+b）個元素的集合（n=0，1，2，3...）。如果 an+b 爲 0，無法選中任何元素。

:nth-child(4) 匹配位置爲 4 的元素

  /*點亮了第三個燈泡，因爲第三個燈泡在所有兄弟元素中排第4*/
 <div class="bulb-lists">
  <p>.bulb 的兄弟元素</p>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
 </div>

.bulb:nth-child(4){
  background-image: url('../assets/img/light.png')!important;
}

效果：

2.:nth-child(2n) 匹配位置爲 2、4、6、8...的元素，可以使用 :nth-child(even)代替。

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
</div>

.bulb:nth-child(2n){
  background-image: url('../assets/img/light.png')!important;
}

效果：

3.:nth-child(2n+1) 匹配位置爲 1、3、5、7...的元素，可以使用 :nth-child(odd)代替。

.bulb:nth-child(2n+1){
  background-image: url('../assets/img/light.png')!important;
}

效果：

4.:nth-child(3n) 匹配位置爲 3、6、9...的元素。

.bulb:nth-child(3n){
  background-image: url('../assets/img/light.png')!important;
}

效果

:nth-of-type(an+b)

:nth-of-type與 nth-child 相似，不同之處在於它是隻匹配特定類型的元素。

 <div class="bulb-lists">
  <p>.bulb 的兄弟元素 這是一個 p 標籤</p>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
 </div>
.bulb:nth-of-type(4){
  background-image: url('../assets/img/light.png')!important;
}

效果：

:nth-last-child(an+b)

:nth-last-child與nth-child相似，它是從最後一個子元素開始計數的。

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>.bulb 的兄弟元素 這是一個 p 標籤</p>
</div>
.bulb:nth-last-child(4){
  background-image: url('../assets/img/light.png')!important;
}

:nth-last-type

:nth-last-of-type與nth-of-type相似，不同之處在於它是從最後一個子元素開始計數的。

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>.bulb 的兄弟元素 這是一個 p 標籤</p>
</div>

.bulb:nth-last-type(4){
  background-image: url('../assets/img/light.png')!important;
}

僞元素

僞元素的前綴是兩個冒號 (::) ，同樣是添加到選擇器後面去選擇某個元素的某個部分。僞元素創建了不存在 DOM 樹中的元素，併爲其添加樣式。例如，::after 選擇元素後，在其內容後使用 content 添加內容。雖然可以看到添加的內容，但是這些內容實際上不存在 DOM 樹中。

::after(:after)

使用::after會創建一個僞元素，該僞元素會成爲選中元素的最後一個子元素

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>哇塞，好亮呀！</p>
</div>

p::after{
    content: '✨✨✨'
}

效果圖：

::before(:before)

使用::before會創建一個僞元素，該僞元素會成爲選中元素的最後一個子元素

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>哇塞，好亮呀！</p>
</div>

p::before{
    content: '🌟🌟🌟'
}

效果圖：

::first-letter（:first-letter）

::first-letter選中某塊級元素第一行的第一個字母，並且文字所處的行之前沒有其他內容。

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>哇塞，好亮呀！</p>
</div>

p::first-letter{
    color: #ffeb3b;
}

效果圖：

::first-line (:first-line)

::first-line 在某塊級元素的第一行應用樣式。第一行的長度取決於很多因素，包括元素寬度，文檔寬度和文本的文字大小。和其他所有的僞元素一樣，::first-line 不能匹配任何真實存在的html元素。::first-line 僞元素只能在塊容器中,所以,::first-line僞元素只能在一個display值爲block, inline-block, table-cell 或者 table-caption中有用。

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>哇塞，好亮呀！<br>第二行</p>
</div>

p::first-line{
    color: #ffeb3b;
}

效果圖：

::selection

::selection 用於文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設備選中的部分）。


p::selection {
  background-color: #ffeb3b;
}

使用鼠標選中亮字，效果圖

參考文檔：

https://developer.mozilla.org...
http://www.alloyteam.com/2016...

總結常用僞類與僞元素

總結常用僞類與僞元素

僞類

:first-child

:first-of-type

:last-child

:last-of-type

:not

:nth-child(an+b)

:nth-of-type(an+b)

:nth-last-child(an+b)

:nth-last-type

僞元素

::after(:after)

::before(:before)

::first-letter（:first-letter）

::first-line (:first-line)

::selection

總結異步編程的六種方式

總結常用僞類與僞元素

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結