1. 程式人生 > >五分鐘帶你看完CSS3新增的偽類選擇器,讓你體驗使用CSS3的快感。

五分鐘帶你看完CSS3新增的偽類選擇器,讓你體驗使用CSS3的快感。

CSS選擇器用於選擇你想要的元素的樣式的模式。偽類元素主要用於對已有選擇器做進一步的限制,對已有選擇器能匹配的元素做進一步的過濾。

偽類選擇器

1.UI元素狀態偽類選擇器

UI元素狀態偽類選擇器主要用於根據UI元素的狀態進行篩選,UI元素狀態偽類選擇器有如下幾個。

示例 描述 示例 描述
:link 選擇連結元素 :visited 訪問過連結元素後的狀態
:hover 滑鼠懸停其上的元素 :ative 滑鼠點選時觸發的事件
:focus 當前獲取焦點的元素 :enabled 元素處於可用狀態
:disabled 元素處於不可用狀態 :checked 元素處於選中狀態
:selection 當前被選中的內容 :indeterminate 當前選中狀態不明確的元素
:read-only 處於只讀狀態的元素 :read-write 處於讀寫狀態的元素
:required 具有必填要求的元素 :optional 無必須要求填寫的元素
:valid 能通過輸入校驗的元素 :invalid 不能通過輸入校驗的元素
:in-range 當前處於指定範圍的元素 :out-of-range 當前處於超出範圍的元素

2.結構偽類選擇器

結構偽類選擇器是指根據HTML元素之間的結構關鍵進行篩選的偽類選擇器。

2.1 :root偽類選擇器

用於匹配HTML文件的根元素,根元素只能是<html>元素。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :root偽選擇器 </title>
	<style type="text/css">
		:root {
			background-color: #ccc;
		}
		body {
			background-color: #888;
		}
	</style>
</head>
<body>
Java Java Java<br/>Java EE Java EE Java EE<br/>
Ajax Ajax Ajax<br/>XML XML XML<br/>
Java EE Java EE Java EE<br/>Android Android Android<br/>
</body>
</html>

2.2 :first-child、:last-child、:nth-child、:nth-last-child和:only-child

這組選擇器依次要求匹配該元素必須是其父元素的第一個子節點、最後一個子節點、第n個子節點、倒數第n個子節點、唯一的子節點,這是這組選擇器的共同特點,下面將示範它的用法,希望大家想學習CSS3選擇器的朋友,以實際操作為主,去理解CSS3選擇器的含義和用法。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :child </title>
	<style type="text/css">
		/* 定義對作為其父元素的第一個子節點的li元素起作用的CSS樣式 */
		li:first-child {
			border: 1px solid black;
		}
		/* 定義對作為其父元素的最後一個子節點的li元素起作用的CSS樣式 */
		li:last-child {
			background-color: #aaa;
		}
		/* 定義對作為其父元素的第2個子節點的li元素起作用的CSS樣式 */
		li:nth-child(2){
			color: #888;
		}
		/* 定義對作為其父元素的倒數第2個子節點的li元素起作用的CSS樣式 */
		li:nth-last-child(2){
			font-weight: bold; 
		}
		/* 定義對作為其父元素的唯一的子節點的span元素起作用的CSS樣式 */
		span:only-child {
			font-size: 30pt;
			font-family: "隸書";
		}
	</style>
</head>
<body>
<ol>
	<li>www.baidu.com</li>
	<li>www.baidu.com</li>
	<li>www.baidu.com</li>
	<li>www.baidu.com</li>
	<li>www.baidu.com</li>
</ol>
<ul>
	<li id="java">Java</li>
	<li id="javaee">Java EE</li>
	<li id="ajax">Ajax</li>
	<li id="xml">XML</li>
	<li id="ejb">Java EE企業應用</li>
	<li><span id="android">Android</span></li>
</ul>
<span>Java</span>
</body>
</html>

 對於nth-child和nth-last-child兩個偽類選擇器,它們的功能不止於此,還支援奇數、偶數節點和xn+y的用法。

選擇器:nth-child(odd/event) 父元素的第奇數個/偶數個子節點的元素
選擇器:nth-last-child(odd/event) 父元素的倒數奇數個/偶數個子節點的元素
選擇器:nth-child(xn+y) 父元素的第xn+y個子節點
選擇器:nth-last-child(xn+y) 父元素的倒數第xn+y個子節點
<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :nth-child </title>
	<style type="text/css">
		/* 定義對作為其父元素的奇數個子節點的li元素起作用的CSS樣式 */
		li:nth-child(odd) {
			margin: 10px;
			border: 2px dotted black;
		}
		/* 定義對作為其父元素的偶數個子節點的li元素起作用的CSS樣式 */
		li:nth-child(even) {
			padding: 4px;
			border: 1px solid black;
		}
		/* 定義對作為其父元素的倒數第3n+1個(1、4、7)子節點
			的li元素起作用的CSS樣式 */
		li:nth-last-child(3n+1) {
			border: 2px solid black;
		}
	</style>
</head>
<body>
<ul>
	<li id="java">Java</li>
	<li id="javaee">Java EE</li>
	<li id="ajax">Ajax</li>
	<li id="xml">XML</li>
	<li id="ejb">Java EE企業應用</li>
	<li id="android">Android</li>
</ul>
</body>
</html>

2.3 :first-of-type、:flast-of-type、:nth-of-type、:nth-last-of-type和:only-of-type

這組偽類選擇器與上面那組xxx-child有些類似,但這組並不要求是父元素的第1個、倒數n個、唯一元素,只要求它們與其有共同型別、同級元素的第1個、倒數n個、唯一元素。也跟上組一樣擁有奇偶節點和xn+y的用法。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :type </title>
	<style type="text/css">
		p {
			padding: 5px;
		}
		/* 匹配p選擇器,且是與它同類型、同級的兄弟元素中的第一個的CSS樣式 */
		p:first-of-type{
			border: 1px solid black;
		}
		/* 匹配p選擇器,且是與它同類型、同級的兄弟元素中的最後一個的CSS樣式 */
		p:last-of-type {
			background-color: #aaa;
		}
		/* 匹配p選擇器,且是與它同類型、同級的兄弟元素中的第2個的CSS樣式 */
		p:nth-of-type(2){
			color: #888;
		}
		/* 匹配p選擇器,且是與它同類型、同級的兄弟元素中的倒數第2個的CSS樣式 */
		p:nth-last-of-type(2){
			font-weight: bold; 
		}
	</style>
</head>
<body>
<div>百度一下</div>
<p>No.1</p>
<p>No.2</p>
<p>No.3</p>
<p>No.4</p>
<hr/>
<div>
	<div id="java">Java</div>
	<div id="javaee">Java EE</div>
	<p id="ajax">Ajax</p>
	<p id="xml">XML</p>
	<p id="ejb">Java EE企業應用</p>
	<p id="android">Android</p>
	<div id="swift">Swift</div>
</div>
</body>
</html>

2.4 :empty偽類選擇器

:empty偽類選擇器要求該元素只能是空元素,不能包含子節點,也不能包含文字內容(連空格都不行),示例如下。


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :empty </title>
	<style type="text/css">
		/* 定義對空元素起作用的CSS樣式 */
		:empty {
			border: 1px solid black;
			height: 60px;
		}
	</style>
</head>
<body>
<img src="wjc.gif" alt="www.baidu.com"/>
<div></div>
<div> </div>
</body>
</html>

2.5 :lang偽類選擇器

lang偽類選擇器要求匹配的內容必須是指定語言的元素。對使用多語言版本的網站,可以根據不同語言版本,設定不同的樣式。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :lang </title>
	<style type="text/css">
		/* 定義對語言為zh的元素起作用 */
		:lang(zh) {
			border: 1px solid black;
			height: 60px;
		}
	</style>
</head>
<body>
<div lang="zh">Java</div>
<div>Java EE</div>
<p lang="zh">Android</p>
</body>
</html>

3.其他偽類選擇器

3.1 目標偽類選擇器

target選擇器要求元素必須是命名錨點(可快速將訪問者帶到指定位置)的目標,而且必須是正在訪問的目標。我們可以通過該選擇器高亮顯示正在被訪問的目標,聽了這麼多,是不是沒怎麼明白,讓我們一起來看下面的示例,實操一下你就懂了。


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :target </title>
	<style type="text/css">
		:target{
			background-color: #ff0;
		}
	</style>
</head>
<body>
<p id="menu">
<a href="#java">Java</a> | 
<a href="#ee">Java EE</a> | 
<a href="#android">Android</a> | 
<a href="#ejb">Java EE企業應用</a>
</p>
<div id="java">
<h2>Java</h2>
<p>Java</p>
</div>
<div id="ee">
<h2>Java EE</h2>
<p>Java EE</p>
</div>
<div id="android">
<h2>Android</h2>
<p>Android</p>
</div>
<div id="ejb">
<h2>Java EE企業應用</h2>
<p>Java EE企業應用</p>
</div>
</body>
</html>

3.2 否定偽類選擇器

not偽類選擇器就是用兩個選擇器做減法,選擇器匹配非指定元素或者選擇器的每個元素,下面將示範它的用法。


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :not </title>
	<style type="text/css">
		li:not(#ajax) {
			color: #999;
			font-weight: bold;
		}
	</style>
</head>
<body>
<ul>
	<li id="java">Java</li>
	<li id="javaee">Java EE</li>
	<li id="ajax">Ajax</li>
	<li id="xml">XML</li>
	<li id="android">Android</li>
</ul>
</body>
</html>

層次選擇器

層次選擇器是通過DOM元素間的層次關係獲取元素,其主要的層次關係包括後代、父子、相鄰、兄弟關係,通過其中基類關係可以方便快捷地定位元素,以下就是層次選擇器的型別。

型別 示例 描述
後代選擇器 div p 選擇 <div> 元素內部的所有 <p> 元素
子選擇器 div>p 選擇父元素為 <div> 元素的所有 <p> 元素
相鄰兄弟選擇器 div+p 選擇緊接在 <div> 元素之後的所有 <p> 元素
通用選擇器 p~ul 選擇前面有 <p> 元素的每個 <ul> 元素

瀏覽器專屬的屬性

有些CSS屬性還不支援一些瀏覽器,為了讓這些瀏覽器識別專屬屬性,CSS規範在CSS屬性前增加各自的瀏覽器字首。例如:-moz-字首是Mozilla瀏覽器(如Firefox)的字首。常見瀏覽器字首如下所示。

字首 組織 示例 說明
-ms- Microsoft -ms-interpolation-mode Interner Explorer瀏覽器專屬的CSS屬性需要加上-ms-字首
-moz- Mozllia -moz-read-only 所有基於Gecko引擎的瀏覽器(Firefox)專屬的CSS屬性需要加上-moz-字首
-webkit- Webkit -webkit-box-shadow Chrome、Safari、新版Opera專屬的CSS屬性需要加上-webkit-字首

----------------------------------------------------審視和了解自己,是人生成功的關鍵。----------------------------------------------------