總結常用偽類與偽元素

anRui 發布于2019-08-30 10:50 / 1612人閱讀

摘要：總結常用偽類與偽元素偽類和偽元素是為了格式化樹以外的信息而被引入的。偽類一個偽類是以一個冒號作為前綴，被添加到一個選擇器末尾的關鍵字，可以讓指定的元素在特定的狀態呈現指定的樣式。

總結常用偽類與偽元素

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

偽類

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

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

:first-child

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

/* :first-child 沒有辦法點亮小燈泡，因為此時選中的是第一個 p 標簽 */


  .bulb 的兄弟元素
  
  
  
  
  
  
  
  


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

效果如下：

/* :first-child 點亮第一個小燈泡， 此時選中的是第一個 .bulb */

  
  
  
  
  
  
  
  


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

效果如下：

:first-of-type

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

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


  .bulb 的兄弟元素
  
  
  
  
  
  
  
  


.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 的燈泡*/
 
  
  
  
  
  
  
  
  


.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*/
 
  .bulb 的兄弟元素
  
  
  
  
  
  
  
  
 

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

效果如下：

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


  
  
  
  
  
  
  
  


.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 相似，不同之處在于它是只匹配特定類型的元素。

 
  .bulb 的兄弟元素 這是一個 p 標簽
  
  
  
  
  
  
  
  
 
.bulb:nth-of-type(4){
  background-image: url("../assets/img/light.png")!important;
}

效果如下：

:nth-last-child(an+b)

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


  
  
  
  
  
  
  
  
  .bulb 的兄弟元素 這是一個 p 標簽

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

:nth-last-type

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


  
  
  
  
  
  
  
  
  .bulb 的兄弟元素 這是一個 p 標簽


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

偽元素

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

::after(:after)

使用::after會創建一個偽元素，該偽元素會成為選中元素的最后一個子元素


  
  
  
  
  
  
  
  
  哇塞，好亮呀！


p::after{
    content: "???"
}

效果如下：

::before(:before)

使用::before會創建一個偽元素，該偽元素會成為選中元素的最后一個子元素


  
  
  
  
  
  
  
  
  哇塞，好亮呀！


p::before{
    content: "

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114601.html

談談css偽類與偽元素

摘要：狀態偽類是基于元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。單冒號用于偽類，雙冒號用于偽元素。可以通過對父元素添加偽類撐開父元素高度，因為就是其最后一個子元素。 css選擇器常見包括id（#id）、標簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...

Berwin 2019-08-01 18:04 評論0 收藏0
談談css偽類與偽元素

摘要：狀態偽類是基于元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。單冒號用于偽類，雙冒號用于偽元素。可以通過對父元素添加偽類撐開父元素高度，因為就是其最后一個子元素。 css選擇器常見包括id（#id）、標簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...

hedzr 2019-08-29 13:53 評論0 收藏0
偽類與偽元素

摘要：介紹偽類和偽元素是中很常見的兩個概念，利用的好，能夠很方便的實現一些特殊效果。偽類與偽元素由于用法相近，導致平時使用并不能很好的區分這兩個概念。偽類偽類類似于，用于對已有元素增加特殊狀態，比如等。偽元素偽元素包括。介紹偽類和偽元素是css中很常見的兩個概念，利用的好，能夠很方便的實現一些特殊效果。偽類與偽元素由于用法相近，導致平時使用并不能很好的區分這兩個概念。偽類（pseudo-...

kamushin233 2019-08-28 18:30 評論0 收藏0
偽類與偽元素

摘要：一偽類偽類包含兩種狀態偽類偽類和結構性偽類。狀態偽類是基于元素當前狀態進行選擇的。二偽元素偽元素是對元素中的特定內容進行操作，而不是描述狀態。一、偽類偽類包含兩種：狀態偽類（UI 偽類）和結構性偽類。 (1)狀態偽類是基于元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。當元素處于某狀態時會呈現該樣式，而進入另一狀態后，該樣...

ChanceWong 2019-08-30 15:55 評論0 收藏0