這篇“CSS偽類是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS偽類是什么”文章吧。

創(chuàng)新互聯(lián)為客戶提供專業(yè)的成都網(wǎng)站建設、做網(wǎng)站、程序、域名、空間一條龍服務，提供基于WEB的系統(tǒng)開發(fā). 服務項目涵蓋了網(wǎng)頁設計、網(wǎng)站程序開發(fā)、WEB系統(tǒng)開發(fā)、微信二次開發(fā)、手機網(wǎng)站制作設計等網(wǎng)站方面業(yè)務。

什么是偽類？

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

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

偽類與它們類似，因為它們也用于將樣式規(guī)則添加到共享相同特征的元素。

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

偽類和偽元素可以在CSS選擇器中使用，但在HTML源代碼中不存在。相反，它們在某些條件下由UA“插入”以用于在樣式表中尋址。

偽類的目的

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

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

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

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

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

2、訪問的鏈接

3、一個全屏的元素。

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

<ul>

<li>item1</li>

<li>item2</li>

<li>item3</li>

<liclass="last">item4</li>

</ul>

<select>

<option>option1</option>

<option>option2</option>

<option>option3</option>

<optionclass="last">option4</option>

</select>

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

li.last{

text-transform:uppercase;

}

option.last{

font-style:italic;

}

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

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

li:last-child{

text-transform:uppercase;

}

option:last-child{

font-style:italic;

}

偽類的主要類型

偽類有很多種，它們都為我們提供了基于其特征無法訪問或難以訪問的特征來定位元素的方法。這是MDN中標準偽類的列表。

1.動態(tài)偽類

動態(tài)偽類根據(jù)它們?yōu)轫憫脩舻慕换ザD(zhuǎn)換的狀態(tài)動態(tài)地添加到HTML元素和從HTML元素中刪除。一些的動態(tài)偽類的例子是，，，和，所有這些都可以被添加到錨定標記。:hover:focus:link:visited<a>

a:visited{

color:#8D20AE;

}

.button:hover,

.button:focus{

font-weight:bold;

}

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

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

:checked可以應用于復選框（<inputtype="checkbox">）

:fullscreen定位當前以全屏模式顯示的任何元素

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

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

.checkbox:checked+label{

font-style:italic;

}

input:disabled{

background-color:#EEEEEE;

}

3.結構偽類

結構偽類根據(jù)它們在文檔結構中的位置對元素進行分類。它最常見的例子是:first-child，:last-child和:nth-child(n)-都可以用來根據(jù)容器的位置來定位容器內(nèi)的特定子元素-并且:root它以DOM中最高級別的父元素為目標。

4.雜項偽類

還有一些難以分類的雜項偽類，例如：

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

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

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

p:lang(ko){

background-color:#FFFF00;

}

:root{

background-color:#FAEBD7;

}

nth-child與類型Pseudo-Classes的第n個

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

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

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

我們來看一個例子吧。

/*aparagraphthat'salsothesecondchildinsideitsparentelement*/

p:nth-child(2){

color:#1E90FF;//lightblue

}

/*thesecondparagraphinsideaparentelement*/

p:nth-of-type(2){

font-weight:bold;

}

讓我們看看這個簡短的CSS樣式如何在兩種不同的情況下使用HTML。

案例1

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

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

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

<!--Case1-->

<div>

<p>Paragraph2,Child1</p>

<ul>UnorderedList1,Child2</ul>

<p>Paragraph3,Child3</p>

</div>

以上就是關于“CSS偽類是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：CSS偽類是什么
URL分享：http://aaarwkj.com/article40/ihpjho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站設計、微信小程序、網(wǎng)站排名、手機網(wǎng)站建設、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)