DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> CSS選擇器Ⅲ
CSS選擇器Ⅲ
編輯:CSS特效代碼     

 

一、結構性偽類選擇器
1、根元素選擇器:
:root{border:5px solid red;} 【選取html根元素】

2、子元素選擇器:
ul > li{color:#009933;} 【所有子元素】

ul > li:first-child{color:#009933;} 【選擇第一個子元素】

ul > li:last-child{color:#009933;} 【第一代選擇器,選擇最後一個子元素】

ul li:first-child{color:red;} 【後代選擇器,范圍比>廣,對於中間隔了幾層不敏感】

li:first-child{color:red;} 【選擇li元素】

:first-child{color:red;} 【將根元素body當作了住】
s
ul > li:only-child{color:#009933;} 【單個子元素】

div > p:only-of-type{color:red;} 【選擇div下單個元素類型的那個子元素】

3、nth-child(n)系列
ul > li:nth-child(2){color:red;} 【nth-child(n)系列---第二個子元素】

ul > li:nth-last-child(2){color:red;} 【nth-child(n)系列---倒數第二個子元素】

div > p:nth-of-type(2){color:red;} 【選擇特定元素的子元素,第二個子元素必須為P】

div > p:nth-last-of-type(2){color:red;} 【選擇特定元素的子元素,倒數第二個子元素必須為P】

二、UI偽類選擇器(一般用來匹配表單控件)

input:enabled{border:1px solid red;} 【給未禁用表單添加樣式 】

input:disabled{border:1px solid blue;} 【給禁用表單添加樣式 】

input:checked{display:none} 【checked勾選框、display:none將使候選後表單隱藏】

input:default{display:none} 【將默認勾選的勾選框隱藏】

input:valid{border:1px solid green;} 【html表單加入元素required後添加驗證功能valid】

input:invalid{ border:1px solid red;} 【驗證是否合法有效(比如正確的郵箱格式)】

input:required{border:1px solid green;}

input:optional{border:1px solid red;} 【需求與非強制】

三、動態偽類選擇器(對鼠標懸停點擊的效果進行定義)

a:link{color:green;} 【未訪問】

a:visited{color:red;} 【已訪問】

a:hover{color:orange;} 【鼠標懸停】

a:active{color:black;} 【鼠標長按不松】

input:focus{border:3px solid blue;} 【選中文本框】

a:not([href*="baidu"]){color:red;} 【將baidu以外的超鏈接文/反選】

p:empty{display:none;} 【取消空元素】

p:lang(en){color:#00CC66;} 【選擇包含lang屬性且屬性值為en的元素】

b:target{color:#0066CC;} 【選定id錨點】

::selection{color:#003399;} 【圈選時變色】

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved