css選擇器

元素選擇器
 經過標籤名稱來定位頁面元素
     特色 定位頁面中一類元素
     h1{
     }
     p{
     }

類選擇器
     元素的標準class屬性
     .cls{
     }

ID選擇器
     ID選擇器  經過元素的ID數據定位頁面元素
     元素的標準ID屬性
         因爲元素是ID屬性必須是惟一的，定位的元素也是惟一的
         *做用 - 表示當前元素的標識
         特色 - 惟一不可重複
           #id{
　　　　　　　　}

通配符選擇器
 通配符選擇器 - 匹配當前頁面中所用的元素
 * 用法  -用於定義基礎樣式
 * 問題 - 可能用心頁面的加載速度

　*{
　　color:red ;
　　}

選擇器優先級：
1 內聯樣式的優先級爲 1000
2 ID選擇器的優先級爲 100
3 類選擇器的優先級   10
4 元素選擇器的優先級爲 1
5 通配符選擇器的優先級爲 0
 
注意的是 !important  致使當前的選擇器的當前樣式優先級別最高
示例 ：
　　*{
　　color:red !important;
   }

 

CSS選擇器用於選擇你想要的元素的樣式的模式。

選擇器	示例	示例說明
.class	.intro	選擇全部class="intro"的元素
#id	#firstname	選擇全部id="firstname"的元素
*	*	選擇全部元素
element	p	選擇全部<p>元素
element,element	div,p	選擇全部<div>元素和<p>元素
element element	div p	選擇<div>元素內的全部<p>元素
element>element	div>p	選擇全部父級是 <div> 元素的 <p> 元素
element+element	div+p	選擇全部緊接着<div>元素以後的<p>元素
[attribute]	[target]	選擇全部帶有target屬性元素
[attribute=value]	[target=-blank]	選擇全部使用target="-blank"的元素
[attribute~=value]	[title~=flower]	選擇標題屬性包含單詞"flower"的全部元素
[attribute|=language]	[lang|=en]	選擇一個lang屬性的起始值="EN"的全部元素
:link	a:link	選擇全部未訪問連接
:visited	a:visited	選擇全部訪問過的連接
:active	a:active	選擇活動連接
:hover	a:hover	選擇鼠標在連接上面時
:focus	input:focus	選擇具備焦點的輸入元素
:first-letter	p:first-letter	選擇每個<P>元素的第一個字母
:first-line	p:first-line	選擇每個<P>元素的第一行
:first-child	p:first-child	指定只有當<p>元素是其父級的第一個子級的樣式。
:before	p:before	在每一個<p>元素以前插入內容
:after	p:after	在每一個<p>元素以後插入內容
:lang(language)	p:lang(it)	選擇一個lang屬性的起始值="it"的全部<p>元素
element1~element2	p~ul	選擇p元素以後的每個ul元素
[attribute^=value]	a[src^="https"]	選擇每個src屬性的值以"https"開頭的元素
[attribute$=value]	a[src$=".pdf"]	選擇每個src屬性的值以".pdf"結尾的元素
[attribute*=value]	a[src*="runoob"]	選擇每個src屬性的值包含子字符串"runoob"的元素
:first-of-type	p:first-of-type	選擇每一個p元素是其父級的第一個p元素
:last-of-type	p:last-of-type	選擇每一個p元素是其父級的最後一個p元素
:only-of-type	p:only-of-type	選擇每一個p元素是其父級的惟一p元素
:only-child	p:only-child	選擇每一個p元素是其父級的惟一子元素
:nth-child(n)	p:nth-child(2)	選擇每一個p元素是其父級的第二個子元素
:nth-last-child(n)	p:nth-last-child(2)	選擇每一個p元素的是其父級的第二個子元素，從最後一個子項計數
:nth-of-type(n)	p:nth-of-type(2)	選擇每一個p元素是其父級的第二個p元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	選擇每一個p元素的是其父級的第二個p元素，從最後一個子項計數
:last-child	p:last-child	選擇每一個p元素是其父級的最後一個子級。
:root	:root	選擇文檔的根元素
:empty	p:empty	選擇每一個沒有任何子級的p元素（包括文本節點）
:target	#news:target	選擇當前活動的#news元素（包含該錨名稱的點擊的URL）
:enabled	input:enabled	選擇每個已啓用的輸入元素
:disabled	input:disabled	選擇每個禁用的輸入元素
:checked	input:checked	選擇每一個選中的輸入元素
:not(selector)	:not(p)	選擇每一個並不是p元素的元素
::selection	::selection	匹配元素中被用戶選中或處於高亮狀態的部分
:out-of-range	:out-of-range	匹配值在指定區間以外的input元素
:in-range	:in-range	匹配值在指定區間以內的input元素
:read-write	:read-write	用於匹配可讀及可寫的元素
:read-only	:read-only	用於匹配設置 "readonly"（只讀） 屬性的元素
:optional	:optional	用於匹配可選的輸入元素
:required	:required	用於匹配設置了 "required" 屬性的元素
:valid	:valid	用於匹配輸入值爲合法的元素
:invalid	:invalid	用於匹配輸入值爲非法的元素