css如何分辨偽類和偽元素？偽類別和偽元素的各自的區別與用法（程式碼實例）-css教學-PHP中文網

首頁

web前端

css教學

css如何分辨偽類和偽元素？偽類別和偽元素的各自的區別與用法（程式碼實例）

青灯夜游

Sep 10, 2018 pm 12:47 PM

css偽元素偽類

在我們學習前端開發的時候，有時總是會把css中的偽類和偽元素混淆在一起。那麼，在css中什麼是偽類？什麼又是偽元素？它們有什麼差別，又是怎麼使用的？本章我們就給大家好好聊聊css中的偽類和偽元素，介紹css中的偽類和偽元素的區別和基本用法。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一.偽類別（用於為某些選擇器添加特殊的效果）

偽類別存在的意義是為了透過選擇器找到那些不存在與DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息。偽類別由一個冒號:開頭，冒號後面是偽類別的名稱和包含在圓括號中的可選參數。任何常規選擇器可以再任何位置使用偽類。偽類語法不區別大小寫。有些偽類的作用會互斥，有些偽類可以同時被同一個元素使用。並且，為了滿足使用者在操作DOM時產生的DOM結構改變，偽類也可以是動態的。

偽類別包含兩種：狀態偽類別和結構性偽類別。

狀態偽類別是基於元素目前狀態進行選擇的。在與使用者的互動過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。當元素處於某狀態時會呈現該樣式，而進入另一狀態後，該樣式也會失去。常見的狀態偽類別主要包括：

:link 應用於未被存取過的連結；
:hover 套用於滑鼠懸停到的元素；
:active 應用於啟動的元素；
:visited 應用於被訪問過的鏈接，與:link互斥。
:focus 應用於擁有鍵盤輸入焦點的元素。

結構性偽類是css3新增選擇器，利用dom樹進行元素過濾，透過文件結構的互相關係來匹配元素，能夠減少class和id屬性的定義，使文檔結構更簡潔。常見的包括：

:first-child 選擇某個元素的第一個子元素；
:last-child 選擇某個元素的最後一個子元素；
:nth-child() 選擇某個元素的一個或多個特定的子元素；
:nth-last-child() 選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算出；
:nth-of-type() 選擇指定的元素；
:nth-last-of-type() 選擇指定的元素，從元素的最後一個開始計算；
:first-of-type 選擇一個上級元素下的第一個同類子元素；
:last-of-type 選擇一個上級元素的最後一個同類子元素；
:only-child 所選的元素是它的父元素的唯一一個子元素；
:only-of-type 選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
:empty 選擇的元素裡面沒有任何內容。

範例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类</title>
		<style>
			.demo {
				width: 200px;
				height: 500px;
				margin: 50px auto;
				text-align: center;
			}
			.tab_content {
			  	height: 50px;
			  	background: red;
			  	margin-bottom: 10px;
			}
			#tab1:target, #tab2:target, #tab3:target {
			    background:blue;
			    line-height: 50px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<ul class="tabs">
			    <li><a href="#tab1">标签一</a></li>
			    <li><a href="#tab2">标签二</a></li>
			    <li><a href="#tab3">标签三</a></li>
			</ul>
			<div id="tab1" class="tab_content">tab1</div>
			<div id="tab2" class="tab_content">tab2</div>
			<div id="tab3" class="tab_content">tab3</div>
		</div>
	</body>
</html>

效果圖1：

css如何分辨偽類和偽元素？偽類別和偽元素的各自的區別與用法（程式碼實例）

#效果圖2：

css如何分辨偽類和偽元素？偽類別和偽元素的各自的區別與用法（程式碼實例）

上面效果圖1與效果圖2的差別在於當我點選標籤一以後，tab1盒子的背景色由紅色變成藍色，字體顏色變成白；當點擊標籤二時，就會變成tab2發生變化，點選標籤三也一樣。

二：偽元素（用於將特殊的效果新增至某些選擇器）

偽元素是對元素中的特定內容進行操作，而不是描述狀態。它的操作層次比偽類更深一層，因此動態性比偽類低很多。實際上，偽元素就是選取某些元素前面或後面這種普通選擇器無法完成的工作。控制的內容和元素是相同的，但它本身是基於元素的抽象，並不存在於文件結構中！

常見的偽元素選擇器包括：
:first-letter 選擇元素文字的第一個字（母）。
:first-line 選擇元素文字的第一行。
:before 在元素內容的最前面新增內容。
:after 在元素內容的最後面新增內容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo {
				width: 500px;
				height: 500px;
				margin: 50px auto;
				text-align: center;
			}
			.spliter::before, .spliter::after {
		      	content: &#39;&#39;;
		      	display: inline-block;
		      	border-top: 1px solid black;
		      	width: 200px;
		      	margin: 5px;
		    }
		</style>
	</head>
	<body>
		<div class="demo">
			<p class="spliter">分割线</p>
		</div>
	</body>
</html>

效果圖：

css如何分辨偽類和偽元素？偽類別和偽元素的各自的區別與用法（程式碼實例）