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

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

阿新 • • 發佈：2018-12-17

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-字首

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

相關推薦

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

CSS選擇器用於選擇你想要的元素的樣式的模式。偽類元素主要用於對已有選擇器做進一步的限制，對已有選擇器能匹配的元素做進一步的過濾。 偽類選擇器 1.UI元素狀態偽類選擇器 UI元素狀態偽類選擇器主要用於根據UI元素的狀態進行篩選，UI元素狀態偽類選擇器有如下幾個。

CSS3新增的偽類選擇器，讓你體驗使用CSS3的快感。

CSS選擇器用於選擇你想要的元素的樣式的模式。偽類元素主要用於對已有選擇器做進一步的限制，對已有選擇器能匹配的元素做進一步的過濾。 偽類選擇器 1.UI元素狀態偽類選擇器 UI元素狀態偽類選擇器主要用於根據UI元素的狀態進行篩選，UI元素狀態偽類選擇器有如下幾個。

CSS3----動態偽類選擇器

選擇 :focus orange ted link gre color img .com 5 1、link：超連接在沒被點擊之前的狀態； a:link{ color: red; } 2、visited：超鏈接在被點擊後的狀態；

CSS3----目標偽類選擇器

ott otto adding splay before text active tran near 效果： 代碼： <!DOCTYPE html> <html> <head> <meta charset

css3結構偽類選擇器first-child,last-child,nth-child(),nth-last-child()

1  element:first-child 選擇屬於其父元素的首個子元素的element元素   注意：div:first-child 必須是其父元素下面的第一個子元素且必須是div元素才能匹配的到 匹配結果：   2  同理：element:las

CSS3否定偽類選擇器

否定偽類選擇器用來選擇不滿足某些條件的元素。表 2-6 結構偽類選擇器選擇器功能描述版本E:not(selector)選擇未被選擇器selector所選中，且型別為E的元素3如果想對某個結構元素使用樣式，但是又想排除這個結構下的某些子結構時，否定偽類選擇器就非常有用，它可以過

CSS3:nth-child()偽類選擇器，Table表格奇偶數行定義樣式

原文地址：http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的強大，讓人驚歎，人們在驚喜之餘，又不得不為其艱難的道路感到可惜：好的標準只有得到行業瀏覽器的良好支援才算得上“標準”。CS

CSS3:nth-child()偽類選擇器，奇偶數行自定義樣式first-child

Table表格奇偶數行定義樣式: CSS3的強大，讓人驚歎，人們在驚喜之餘，又不得不為其艱難的道路感到可惜：好的標準只有得到行業瀏覽器的良好支援才算得上“標準”。CSS3標 準已提出數年，但是目前能實現她的瀏覽器並不多，雖然部分瀏覽器能實現部分規範，但這又有什麼用呢？面對

css3中偽類選擇器:target的使用

今天由於在做任務13，裡面有一個子任務是要求用css寫出一個簡單的圖片輪播，剛開始真的是完全沒有思路，想著不用js怎麼繫結點選事件呢，看了別人的一些實現方法，發現:target是一個神奇的東西。 如果想看用css3實現的圖片輪播，狠狠點選這裡demo 剛

CSS3 nth 偽類選擇器

考察下面的 HTML 程式碼片段： <div> <section>section 1</section> <section>section 2</section> <ul> <li>i

CSS3-target偽類選擇器

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>   

CSS3的偽類選擇器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> li:nth-child(2n){

看完這篇Redis快取三大問題，保你面試能造火箭，工作能擰螺絲。

前言 日常的開發中，無不都是使用資料庫來進行資料的儲存，由於一般的系統任務中通常不會存在高併發的情況，所以這樣看起來並沒有什麼問題。   一旦涉及大資料量的需求，如一些商品搶購的情景，或者主頁訪問量瞬間較大的時候，單一使用資料庫來儲存資料的系統會因為面向磁碟，磁碟讀/寫速度問題有嚴重的效能弊端，詳細

css3新增偽類

ttr val 選中 input inpu body 百度 class {} 1、p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素 2、p:first-child ,

html5中css3新增的屬性選擇器介紹

介紹 之前 abd 就是 人員 一對一 新增 href 一對多 什麽是選擇器 使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器。選擇器是CSS3中一個重要的內容，使用CSS選擇器可以大幅度提高web前端開發人員的編寫或者修改頁

CSS3新增偽類--好用的:target

body ctype input div css com disable -- ron 　 　　 問：如果讓你實現下圖，點擊跳轉後，讓內容1增加一個背景顏色，你會怎麽做呢？ 　　 　　可能很多小夥伴第一反應是用JS，給跳轉綁定點擊事件，然後用DOM獲取到內容1，在給其添加

CSS3新增的偽類選擇器

n+1 選擇器 out ack ava size 定義 html 限制 　　偽類選擇器的作用：對已有選擇器做進一步的限制，對已有選擇器能匹配的元素做進一步的過濾。CSS 3提供的偽類選擇器主要分為以下三類： 結構性偽類選擇器 UI元素狀態偽類選擇器 其他偽類選擇器 　　

CSS3新增選擇器示例-偽類選擇器

一. 偽類選擇器介紹 1.1 首先了解下什麼是類選擇器 類選擇器語法：.類名 也就是標籤的class屬性值 示例程式碼 <!DOCTYPE html> <html> <head> <title>

帶著你一步一步在Kotlin使用註解，讓你不再害怕註解

背景知識： Kotlin中有以下四種元註解（用來定義註解的註解）： @Target：限定註解標記的目標（屬性、方法、類、擴充套件等等） @Retention：限定註解是否儲存到位元組碼檔案中；在執行時通過反射是否可見（預設情況下以上兩個條件均為真） @Repeatab

css3基礎 :target 目標偽類選擇器 簡單示例

pos url ctype itl w3cschool ont 錨點 網頁 name 禮悟：　　 公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。 虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。