CSS偽類是什么？

1、css偽類是什么？什么是偽類？一個(gè)偽類是我們可以為了增強(qiáng)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元素舉行分組或分類。偽類與它們類似，由于它們也用于將樣式規(guī)章添加到分享相同特征的元素。但是，雖然真正的類是用戶定義的并且可以在源代碼中被發(fā)覺，但是例如，基于所屬的html元素的當(dāng)前狀態(tài)，ua（用戶代理）（例如web掃瞄器）添加偽類。偽類和偽元素可以在

2、css挑選器中用法，但在html源代碼中不存在。相反，它們?cè)谀承l件下由ua插入以用于在樣式表中尋址。偽類的目的常規(guī)css類的工作是對(duì)元素舉行分類或分組。開發(fā)人員知道他們的元素是如何分組的：他們可以形成類似菜單項(xiàng)，按鈕，縮略圖等的類來(lái)分組，以及后來(lái)的類似元素的樣式。這些分類基于開發(fā)人員自己給出的元素特征。例如，假如開發(fā)者打算用法a作為縮略圖對(duì)象，則可以用法縮略圖類對(duì)其舉行分類。.然而，html元素具有基于其狀態(tài)，位置，性質(zhì)以及與頁(yè)面和用戶的交互的共同特征。這些是html代碼中通常不標(biāo)志的特征，但我們可以用法css中的偽類來(lái)定位它們，例如：1、一個(gè)元素，它是其父元素中的最后一個(gè)子元素2、拜訪的鏈

3、接3、一個(gè)全屏的元素。這些是偽類通常所針對(duì)的特征。為了更好地理解類和偽類之間的區(qū)分，我們假設(shè)我們用法該類.last來(lái)標(biāo)識(shí)不同父容器中的最后一個(gè)元素。item1item2item3item4option1option2option3option4我們可以用法以下css設(shè)置這些最后一個(gè)子元素的樣式：li.lasttext-transform:uppercase;option.lastfont-style:italic;但是當(dāng)最后一個(gè)元素轉(zhuǎn)變時(shí)會(huì)發(fā)生什么？好吧，我們必需將.last類先前一個(gè)元素移動(dòng)到當(dāng)前元素。更新類的棘手可以留給用戶代理，起碼對(duì)于元素中頻繁的那些特征（并且最后一個(gè)元素是它可以獲得的

4、常見元素）。擁有預(yù)定義的:last-child偽類的確十分實(shí)用。這樣，我們不必指示html代碼中的最后一個(gè)元素，但我們?nèi)匀豢梢杂梅ㄒ韵耤ss來(lái)設(shè)置它們的樣式：li:last-childtext-transform:uppercase;option:last-childfont-style:italic;偽類的主要類型偽類有無(wú)數(shù)種，它們都為我們提供了基于其特征無(wú)法拜訪或難以拜訪的特征來(lái)定位元素的辦法。這是mdn中標(biāo)準(zhǔn)偽類的列表。1.動(dòng)態(tài)偽類動(dòng)態(tài)偽類按照它們?yōu)轫憫?yīng)用戶的交互而轉(zhuǎn)換的狀態(tài)動(dòng)態(tài)地添加到html元素和從html元素中刪除。一些的動(dòng)態(tài)偽類的例子是，和，全部這些都可以被添加到錨定標(biāo)志。:ho

5、ver:focus:link:visiteda:visitedcolor:8d20ae;.button:hover,.button:focusfont-weight:bold;2.基于狀態(tài)的偽類基于狀態(tài)的偽類在處于特定靜態(tài)時(shí)添加到元素中。其中一些最著名的例子是：:checked可以應(yīng)用于復(fù)選框（）:fullscreen定位當(dāng)前以全屏模式顯示的任何元素:disabledhtml元素，可以是在已禁用模式，例如，和。最流行的基于狀態(tài)的偽類必需是:checked，它標(biāo)志是否選中了復(fù)選框。.checkbox:checked+labelfont-style:italic;input:disabledbac

6、kground-color:eeeeee;3.結(jié)構(gòu)偽類結(jié)構(gòu)偽類按照它們?cè)谖臋n結(jié)構(gòu)中的位置對(duì)元素舉行分類。它最頻繁的例子是:first-child，:last-child和:nth-child(n)-都可以用來(lái)按照容器的位置來(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:

7、ffff00;:rootbackground-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è)例子吧。/*aparagraphthat&39;salsothesecondchildinsideitsparentelement*/p:nth-child(2)color:1e90ff;/lightblue/*thesecondparagraphinsideaparentelement*/p:nth-of-type(2)font-weight:bold;讓我們看看這個(gè)簡(jiǎn)短的css樣式如何在兩種不同的狀況下用法html。案例1在案例1中，a中的其次個(gè)元素是無(wú)序列表，因此nth-child(2)規(guī)章不適用于它。雖然它是其次個(gè)子元素，但它不是一個(gè)段落。但是，假如父元素的確具有其次個(gè)段落，則該nth-of-type(2)規(guī)章將適用，由于此規(guī)章僅查找元素，而不關(guān)懷父元素內(nèi)的其他類型的