成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

我終于理解了偽類和偽元素

張遷 / 1118人閱讀

摘要：偽類和偽元素，對(duì)于絕大多數(shù)同學(xué)來(lái)說(shuō)，都是耳熟能詳?shù)拿?，但確實(shí)又有很多人搞不清楚它們之間的區(qū)別，以致于混淆概念。除了上面這個(gè)本質(zhì)區(qū)別以外，在中，偽類用單冒號(hào)表示而偽元素用雙冒號(hào)表示。

偽類和偽元素，對(duì)于絕大多數(shù)同學(xué)來(lái)說(shuō)，都是耳熟能詳?shù)拿郑_實(shí)又有很多人搞不清楚它們之間的區(qū)別，以致于混淆概念。而當(dāng)概念都混淆的時(shí)候，也往往意味著你不會(huì)經(jīng)常使用它，怕出錯(cuò)，怕用不好。而這也會(huì)大大影響你的效率，本來(lái)幾行代碼就可以完成的工作，卻要寫上一大堆......所以，花點(diǎn)時(shí)間理清楚每一個(gè)看似微小的概念，會(huì)讓我們的編程更有效率。下面進(jìn)入正題。

偽類和偽元素的區(qū)別，其實(shí)很簡(jiǎn)單，從字面上就可以理解。它們有一個(gè)共同的修飾詞“偽”，那么“偽”是什么意思呢？就是假的唄。所以，偽類就是假的類，偽元素就是假的元素，這就是在字面上它們之間的區(qū)別。下面我們?cè)購(gòu)亩x上感受一下。

1.偽類

CSS3給出的定義是：

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

大致翻譯過(guò)來(lái)的意思就是：偽類存在的意義是為了通過(guò)選擇器，格式化DOM樹以外的信息以及不能被常規(guī)CSS選擇器獲取到的信息。

通過(guò)上面的概念我們知道了偽類的功能有兩種：

1.格式化DOM樹以外的信息。比如：標(biāo)簽的:link、:visited等。這些信息不存在于DOM樹中。

2.不能被常規(guī)CSS選擇器獲取到的信息。比如：要獲取第一個(gè)子元素，我們無(wú)法用常規(guī)的CSS選擇器獲取，但可以通過(guò):first-child來(lái)獲取到。

2.偽元素

CSS3給出的定義如下：

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element"s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the?::before?and?::after?pseudo-elements give access to generated content).

大致翻譯過(guò)來(lái)的意思就是：偽元素可以創(chuàng)建一些文檔語(yǔ)言無(wú)法創(chuàng)建的虛擬元素。比如：文檔語(yǔ)言沒有一種機(jī)制可以描述元素內(nèi)容的第一個(gè)字母或第一行，但偽元素可以做到(::first-letter、::first-line)。同時(shí)，偽元素還可以創(chuàng)建源文檔不存在的內(nèi)容，比如使用::before 或 ::after。

3.偽類和偽元素的區(qū)別（CSS3下的區(qū)別）

通過(guò)上面的概念，我們就可以知道偽類與偽元素最本質(zhì)的一個(gè)區(qū)別：

偽類其實(shí)是彌補(bǔ)了CSS選擇器的不足，用來(lái)更方便地獲取信息；

HTML:

    
    
  • 11111
    • 
    
  • 22222
    •

CSS：

li:first-child {
    color: red;   
}
// 選擇器不能直接選取第一個(gè)子元素
// 偽類彌補(bǔ)了選擇器的不足

而偽元素本質(zhì)上是創(chuàng)建了一個(gè)虛擬容器(元素)，我們可以在其中添加內(nèi)容或樣式。

HTML：


    Hello, World

CSS：

.first-letter {
  color: red;
}

上面的代碼其實(shí)就是：

p::first-letter {
  color: red;
}

所以，你可以理解偽元素本質(zhì)上是創(chuàng)建了一個(gè)虛擬容器(元素)了吧。

除了上面這個(gè)本質(zhì)區(qū)別以外，在CSS3中，偽類用單冒號(hào):表示；而偽元素用雙冒號(hào)::表示。一個(gè)選擇器可以同時(shí)使用多個(gè)偽類(但有的偽類會(huì)互斥)；而一個(gè)選擇器只能同時(shí)使用一個(gè)偽元素(未來(lái)的版本可能會(huì)支持多偽元素)。

4.主要用法
4.1偽類

1 :first-child

匹配第一個(gè)子元素。

HTML：

    
    
  • 111
    • 
    
  • 222
    •

CSS：

li:first-child {
  color: red; // 第一個(gè) li 會(huì)變紅
}

2 :last-child

匹配最后一個(gè)子元素。

HTML：

    
    
  • aaa
    • 
    
  • bbb
    • 
    
  • ccc
    •

CSS：

li:last-child {
  color:red; // 最后一個(gè) li 會(huì)變紅
}

3 :first-of-type

匹配屬于其父元素的第一個(gè)特定類型的子元素。

HTML：


    
h1文本

      
p文本

CSS：

p:first-of-type {
  color: red;  // 
標(biāo)簽的內(nèi)容變?yōu)榧t色
}

這里有必要強(qiáng)調(diào)一下:first-child與:first-of-type的區(qū)別。如果你的CSS寫成:

p:first-child {
  color:red;
}

頁(yè)面是不會(huì)有變化的，因?yàn)?p>元素并不是父元素

的第一個(gè)子元素。

4 :last-of-type

匹配屬于其父元素的最后一個(gè)特定類型的子元素。

HTML：


    
h1文本

    
h1文本2

    
p文本

CSS：

h1:last-of-type {
  color: red;  // 倒數(shù)第一個(gè)
標(biāo)簽的內(nèi)容變?yōu)榧t色(h1文本2)
}
4.2 偽元素

1 ::before

在被選元素之前插入內(nèi)容。需要指定content屬性來(lái)插入內(nèi)容。

HTML：

CSS

CSS：

p::before {
  content: "Hi,";
}

2 ::after

在被選元素之后插入內(nèi)容。需要指定content屬性來(lái)插入內(nèi)容。

HTML：

Hi,

CSS：

p::after {
  content: "CSS";
}

3 ::first-letter

匹配元素中文本的首字母。

HTML：

我在學(xué)偽元素

注意：試試把

標(biāo)簽改成

???我在學(xué)偽元素

，你會(huì)發(fā)現(xiàn)很有意思的現(xiàn)象。

CSS：

p::first-letter {
  font-size: 32px;
}

4 ::first-line

匹配元素中第一行的文本(只能在塊元素中使用)。

HTML：

我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素

CSS：

p::first-line {
  color: red;
}

5 ::selection

匹配被用戶選中的部分。

HTML：

我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素,我在學(xué)偽元素

CSS：

p::selection {
  color: red;
}

最后的最后，我說(shuō)的不一定都對(duì)，你一定要自己試試！

(本文完)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115764.html

相關(guān)文章

  • 詳解 CSS 屬性 - 偽類和偽元素的區(qū)別

    摘要：之前寫了一篇詳解屬性的博文，當(dāng)時(shí)自己沒分清楚偽元素和偽類，所以在文章內(nèi)把概念混淆了，慶幸兄指正了我的錯(cuò)誤，所以今天打算好好研究下兩者的區(qū)別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區(qū)別這里用偽類和偽元素來(lái)進(jìn)行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當(dāng)時(shí)自己沒分清楚偽元素和偽類，所以在文章內(nèi)把概念混淆了，慶幸 @ri...

    jiekechoo 評(píng)論0 收藏0

  • 詳解 CSS 屬性 - 偽類和偽元素的區(qū)別

    摘要：之前寫了一篇詳解屬性的博文，當(dāng)時(shí)自己沒分清楚偽元素和偽類，所以在文章內(nèi)把概念混淆了，慶幸兄指正了我的錯(cuò)誤，所以今天打算好好研究下兩者的區(qū)別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區(qū)別這里用偽類和偽元素來(lái)進(jìn)行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當(dāng)時(shí)自己沒分清楚偽元素和偽類，所以在文章內(nèi)把概念混淆了，慶幸 @ri...

    AZmake 評(píng)論0 收藏0

  • CSS基礎(chǔ)篇-- :before && :after的用法，偽類和偽元素的區(qū)別

    摘要：一的用法如同對(duì)偽元素的名稱一樣，是用來(lái)給指定的元素的內(nèi)容前面插入新的內(nèi)容。二偽類和偽元素的區(qū)別偽類種類偽元素種類偽類作用對(duì)象是整個(gè)元素例如盡管這些條件不是基于的，但結(jié)果每一個(gè)都是作用于一個(gè)完整的元素，比如整個(gè)鏈接，段落，等等。 一：:before && :after的用法 :before 如同對(duì)偽元素的名稱一樣，:before 是用來(lái)給指定的元素的內(nèi)容前面插入新的內(nèi)容。舉例說(shuō)明： .b...

    X_AirDu 評(píng)論0 收藏0

  • 你不知道的CSS（三）

    摘要：本文首發(fā)于我的博客在前面兩篇文章你不知道的一和你不知道的二中大致介紹了一些方面比較隱晦的但又很實(shí)用的技巧。系列文章你不知道的一你不知道的二本文首發(fā)于我的博客 本文首發(fā)于我的博客 在前面兩篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介紹了一些CSS方面比較隱晦的但又很實(shí)用的技巧。相信這些技巧會(huì)為大家在項(xiàng)目實(shí)踐中帶來(lái)一定的幫助，本文作為《你不知道的CSS》系列的第三篇...

    xiangzhihong 評(píng)論0 收藏0

  • css基礎(chǔ)（待補(bǔ)充）

    摘要：選擇器基礎(chǔ)選擇器標(biāo)簽選擇器針對(duì)一類標(biāo)簽注意選擇的所有，而不是一個(gè)。元素元素是文檔結(jié)構(gòu)的基礎(chǔ)。行內(nèi)元素不會(huì)在它本身之前或之后生成分隔符，所以可以出現(xiàn)在另一個(gè)元素內(nèi)容中，而不會(huì)破壞其顯示。 css選擇器 基礎(chǔ)選擇器 1.標(biāo)簽選擇器：針對(duì)一類標(biāo)簽 注意：選擇的所有，而不是一個(gè)。 p{ font-size:14px; } css 2.ID選擇器：針對(duì)某一個(gè)特定的標(biāo)簽使用，只能使...

    浠ラ箍 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<