CSS偽類有什么用

這篇文章將為大家詳細(xì)講解有關(guān)CSS偽類有什么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

無(wú)論您是初學(xué)者還是經(jīng)驗(yàn)豐富的CSS開發(fā)人員，您都可能聽說(shuō)過(guò)偽類。最著名的偽類可能是:hover，當(dāng)指針設(shè)備（例如鼠標(biāo)）指向它時(shí)，它允許我們?cè)谔幱趹彝顟B(tài)時(shí)對(duì)元素進(jìn)行樣式化。

按照我們之前關(guān)于margin：auto和CSS Floats的內(nèi)容介紹，我們?cè)谶@篇文章中對(duì)偽類進(jìn)行了更深入的研究。我們將看到什么是偽類，它們是如何工作的，我們?nèi)绾螌?duì)它們進(jìn)行分類，以及它們與偽元素的區(qū)別。

什么是偽類？

一個(gè)偽類是我們可以為了增加CSS選擇一個(gè)關(guān)鍵字定義一個(gè)特殊狀態(tài)的屬于HTML元素。我們可以使用冒號(hào)語(yǔ)法 將偽類添加到CSS選擇器，:如下所示：a:hover{ ... }

一個(gè)CSS類是我們可以添加到HTML我們想申請(qǐng)，同一款式的規(guī)則元素，例如頂部菜單項(xiàng)或側(cè)邊欄小工具的標(biāo)題屬性。換句話說(shuō)，我們可以使用CSS類對(duì)以某種方式相似的HTML元素進(jìn)行分組或分類。

偽類與它們類似，因?yàn)樗鼈円灿糜趯邮揭?guī)則添加到共享相同特征的元素。

但是，雖然真正的類是用戶定義的并且可以在源代碼中被發(fā)現(xiàn)，但是例如，基于所屬的HTML元素的當(dāng)前狀態(tài)，UA（用戶代理）（例如web瀏覽器）添加<div class="myClass">偽類。

偽類和偽元素可以在CSS選擇器中使用，但在HTML源代碼中不存在。相反，它們?cè)谀承l件下由UA“插入”以用于在樣式表中尋址。

偽類的目的

常規(guī)CSS類的工作是對(duì)元素進(jìn)行分類或分組。開發(fā)人員知道他們的元素是如何分組的：他們可以形成類似“菜單項(xiàng)”，“按鈕”，“縮略圖”等的類來(lái)分組，以及后來(lái)的類似元素的樣式。這些分類基于開發(fā)人員自己給出的元素特征。

例如，如果開發(fā)者決定使用a <div>作為縮略圖對(duì)象，則可以使用<div>“縮略圖”類對(duì)其進(jìn)行分類。

<div class="thumbnail">[...]</div>

然而，HTML元素具有基于其狀態(tài)，位置，性質(zhì)以及與頁(yè)面和用戶的交互的共同特征。這些是HTML代碼中通常不標(biāo)記的特征，但我們可以使用 CSS中的偽類來(lái)定位它們，例如：

1、一個(gè)元素，它是其父元素中的最后一個(gè)子元素

2、訪問(wèn)的鏈接

3、一個(gè)全屏的元素。

這些是偽類通常所針對(duì)的特征。為了更好地理解類和偽類之間的區(qū)別，我們假設(shè)我們使用該類.last來(lái)標(biāo)識(shí)不同父容器中的最后一個(gè)元素。

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li class="last">item 4</li>
</ul>
 
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option class="last">option 4</option>
</select>

我們可以使用以下CSS設(shè)置這些最后一個(gè)子元素的樣式：

li.last {
  text-transform: uppercase;
}
 
option.last{
  font-style:italic;
}

但是當(dāng)最后一個(gè)元素改變時(shí)會(huì)發(fā)生什么？好吧，我們必須將.last類從前一個(gè)元素移動(dòng)到當(dāng)前元素。

更新類的麻煩可以留給用戶代理，至少對(duì)于元素中常見的那些特征（并且最后一個(gè)元素是它可以獲得的常見元素）。擁有預(yù)定義的:last-child偽類確實(shí)非常有用。這樣，我們不必指示 HTML代碼中的最后一個(gè)元素，但我們?nèi)匀豢梢允褂靡韵翪SS來(lái)設(shè)置它們的樣式：

li:last-child {
  text-transform: uppercase;
}
 
option:last-child {
    font-style:italic;
}

偽類的主要類型

偽類有很多種，它們都為我們提供了基于其特征無(wú)法訪問(wèn)或難以訪問(wèn)的特征來(lái)定位元素的方法。這是MDN 中標(biāo)準(zhǔn)偽類的列表。

1.動(dòng)態(tài)偽類

動(dòng)態(tài)偽類根據(jù)它們?yōu)轫憫?yīng)用戶的交互而轉(zhuǎn)換的狀態(tài)動(dòng)態(tài)地添加到HTML元素和從HTML元素中刪除。一些的動(dòng)態(tài)偽類的例子是，，，和，所有這些都可以被添加到錨定標(biāo)記。:hover:focus:link:visited<a>

a:visited{
  color: #8D20AE;
}
.button:hover,
.button:focus{
  font-weight: bold;
}

2.基于狀態(tài)的偽類

基于狀態(tài)的偽類在處于特定靜態(tài)時(shí)添加到元素中。其中一些最著名的例子是：

:checked可以應(yīng)用于復(fù)選框（<input type="checkbox">）

:fullscreen 定位當(dāng)前以全屏模式顯示的任何元素

:disabledHTML元素，可以是在已禁用模式，例如<input>，<select>，和<button>。

最流行的基于狀態(tài)的偽類必須是:checked，它標(biāo)記是否選中了復(fù)選框。

.checkbox:checked + label{
  font-style:italic;
}
input:disabled{
  background-color: #EEEEEE;
}

3.結(jié)構(gòu)偽類

結(jié)構(gòu)偽類根據(jù)它們?cè)谖臋n結(jié)構(gòu)中的位置對(duì)元素進(jìn)行分類。它最常見的例子是:first-child，:last-child和:nth-child(n)- 都可以用來(lái)根據(jù)容器的位置來(lái)定位容器內(nèi)的特定子元素 - 并且:root它以DOM中最高級(jí)別的父元素為目標(biāo)。

4.雜項(xiàng)偽類

還有一些難以分類的雜項(xiàng)偽類，例如：

:not(x)選擇與選擇器x不匹配的元素

:lang(language-code) 選擇哪些內(nèi)容采用特定語(yǔ)言的元素

:dir(directionality)選擇具有給定方向性內(nèi)容的元素（從左到右或從右到左）。

p:lang(ko){
  background-color: #FFFF00;
}
:root{
  background-color: #FAEBD7;
}

nth-child與類型 Pseudo-Classes的第n個(gè)

其中一件關(guān)于偽類最難的事情是可能理解的差別:nth-child和:nth-of-type偽類。

兩者都是結(jié)構(gòu)偽類，并在父元素（容器）內(nèi)標(biāo)記特定元素，但方式不同。

假設(shè)?為2，然后:nth-of-child(n)靶向是一個(gè)元素它的父元素的第二個(gè)孩子，以及:nth-of-type(n)目標(biāo)第二的中相同類型的元件的（例如段落）父元素內(nèi)。

我們來(lái)看一個(gè)例子吧。

/* a paragraph that's also the second child inside its parent element */
  p:nth-child(2) {
  color: #1E90FF;    // lightblue
}
/* the second paragraph inside a parent element */
p:nth-of-type(2) {
  font-weight:bold;
}

讓我們看看這個(gè)簡(jiǎn)短的CSS樣式如何在兩種不同的情況下使用HTML。

案例1

在案例1中，a中的第二個(gè)元素<div>是無(wú)序列表，因此nth-child(2)規(guī)則不適用于它。雖然它是第二個(gè)子元素，但它不是一個(gè)段落。

但是，如果父元素確實(shí)具有第二個(gè)段落，則該nth-of-type(2)規(guī)則將適用，因?yàn)榇艘?guī)則僅查找<p>元素，而不關(guān)心父元素內(nèi)的其他類型的元素（例如無(wú)序列表）。

在我們的示例中，nth-of-type(2)規(guī)則將設(shè)置第二個(gè)段落，即子3。

<!-- Case 1 -->
<div>
  <p>Paragraph 1, Child 1</p>
  <ul>Unordered List 1, Child 2</ul>
  <p>Paragraph 2, Child 3</p>
</div>

案例2

在第二種情況下，我們將無(wú)序列表移到第三位，第二段將在它之前。這意味著將應(yīng)用規(guī)則:nth-child(2)和:nth-of-type(2)規(guī)則，因?yàn)榈诙€(gè)段落也是其父<div>元素的第二個(gè)子句。

<!-- Case 2 -->
<div>
  <p>Paragraph 1, Child 1</p>
  <p>Paragraph 2, Child 2</p>
  <ul>Unordered List 1, Child 3</ul>
</div>

如果你想更多地了解:nth-of-child和:nth-of-type偽類之間的差異，CSS Tricks上有一個(gè)很棒的帖子。如果您使用SASS，F(xiàn)amily.scss可以幫助您創(chuàng)建復(fù)雜的nth- child'ified元素。

偽類與偽元素

當(dāng)我們談?wù)搨晤悤r(shí)，理解它們與偽元素的區(qū)別也很重要，以免混淆它們。

Pseudo-elements用戶代理也添加了諸如::before和::after（參見本教程如何使用它們），并且可以使用CSS對(duì)它們進(jìn)行定位和設(shè)置樣式，就像偽類一樣。

但是，雖然我們使用偽類來(lái)選擇文檔樹中僅存在未單獨(dú)標(biāo)記的HTML元素，但偽元素允許我們根據(jù)DOM（例如和）或僅作為目標(biāo)通常不存在于DOM中的元素?，F(xiàn)有元素的某些部分（例如或）。::before::after::first-letter::placeholder

語(yǔ)法也有區(qū)別。偽元素通常用雙冒號(hào)識(shí)別::，而偽類用單冒號(hào)識(shí)別:。

這可能導(dǎo)致混亂，如CSS2中，偽元素也標(biāo)記為單個(gè)冒號(hào) - 瀏覽器仍接受偽元素的單冒號(hào)語(yǔ)法。

我們用CSS來(lái)定位偽類和偽元素之間也存在差異。

1.它們?cè)贑SS選擇器序列中的位置

偽元素只能出現(xiàn)在選擇器序列之后，而偽類可以放在CSS選擇器序列中的任何位置。

例如，您可以<ul>以兩種方式定位列表元素的最后一個(gè)列表項(xiàng)。

<ul>
  <li class="red"></li>
  <li></li>
  <li class="red"></li>
  <li class="red"></li>
</ul>

ul > :last-child.red {
  color: #B0171F;
}

要么

ul > .red:last-child {
  color: #B0171F;
}

選擇器的第一個(gè)序列選擇<ul>元素中的最后一個(gè)子元素（具有類.red），第二個(gè)元素選擇.red內(nèi)部具有類的元素中的最后一個(gè)子元素<ul>。如您所見，偽類的位置是可變的。

讓我們嘗試用偽元素做類似的事情。

ul > .red::after {
  display: block;
  content: 'red';
  color: #B0171F;
}

上面的CSS代碼是有效的，文本“red”將出現(xiàn)在<li>帶有類的項(xiàng)目之后.red。

另一方面，這段代碼不起作用，因?yàn)槲覀儫o(wú)法改變選擇器序列中偽元素的位置。

ul > ::after.red {
  display: block;
  content: 'red';
  color: #B0171F;
}

2.選擇器序列中的出現(xiàn)次數(shù)

此外，只有一個(gè)偽元素可以出現(xiàn)在選擇器旁邊，而偽類可以在組合有意義的情況下相互組合。例如，為了目標(biāo)，同時(shí)也是只讀的，我們可以創(chuàng)建偽類組合的第一個(gè)孩子元素:first-child，并:read-only以下列方式：

:first-child:read-only {
  color:#EEEEEE;
}

jQuery選擇器擴(kuò)展

具有:語(yǔ)法的選擇器代碼并不總是構(gòu)成適當(dāng)?shù)腃SS偽類。如果您曾經(jīng)使用過(guò)jQuery，那么您可能已經(jīng)使用了許多具有:語(yǔ)法的選擇器，例如$(':checkbox')，$(':input')和$(':selected')。

重要的是要知道這些不是 jQuery所針對(duì)的CSS偽類。它們被稱為jQuery選擇器擴(kuò)展。

jQuery選擇器擴(kuò)展允許您使用更簡(jiǎn)單的關(guān)鍵字來(lái)定位HTML元素。它們中的大多數(shù)是多個(gè)普通CSS選擇器的組合，它們用單個(gè)關(guān)鍵字表示。

/* Change the font of all input-related HTML elements,
like button, select, and input */
$( ":input" ).css("font-family","courier new")

關(guān)于CSS偽類有什么用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。