CSS的簡介及其選擇器

基本語法

檢視文字內容檢視文字內容檢視文字內容檢視文字內容檢視文字內容

檢視css的效果檢視css的效果檢視css的效果

zhangsan

23

*

選擇所有標籤

1.未連線 a:link 2.已經訪問鏈結 a:visited 3.進入鏈結 a:hover 4.啟用（按下）狀態 a:active 其中的hover 和active 可以用於其他控價我的鏈結

在頁面中同乙個html元素有不同的選擇器定義樣式的。

1、id選擇器最高

2、類選擇器

3、標記選擇器

div >p

div +p

div ~p

a[title] 
a[title=num1] 意思是選中 屬性title=num1 的a 標籤
a[title^=num] 選中title的屬性值以num 開頭的a標籤
a[title$=num]選中title的屬性值以num 結尾的a標籤a[title|=num] 選中title的屬性值以num-連線的a標籤 如a[title~=num] 選中title的多個屬性值以 空格隔開的 有其中乙個屬性值都能選中 例如三個屬性值你任意選乙個都能選中
比如a[title~=num2] 和 a[title~=num3] 選中的其實是同乙個標籤
a[title*=num] 選中title屬性值 包含num的都能選中 例如a[title=num][name=lisi] 多個屬性選擇 意思 是選中 title=num 並且 name=lisi 的這個a標籤

:first-letter div:first-letter 選中div中的第一行的第乙個字母或者漢字 :first-line div:first-line 選中 div 中子元素第一行 :first-child p:first-child 選中父元素中的第一子元素p 注意要有子父級巢狀關係才能選中只有一層子父級關係 :last-child p:last-child 選擇屬於其父元素最後乙個子元素元素。 :not(selector) li:not(#my) 選擇id不是my的所有li元素。 :selection 當滑鼠左鍵選中文字時這裡注意是兩個冒號前面不加任何標籤 :root 選擇文件的根元素。跟* 這個選擇器很相似 :empty p:empty 選擇沒有子元素的每個元素（包括文字節點）。例如這裡面沒有任何子標籤和文字就會被選中 :enabled input:enabled 選擇每個啟用的元素。 :disabled input:disabled 選擇每個禁用的元素 :checked input:checked 選擇每個被選中的元素。 :focus input:focus 選擇獲得焦點的 input 元素。 :first-of-type p:first-of-type 選擇的這個p元素是父元素中的第乙個注意要有子父級關係注意可以包含多層子父級關係 :last-of-type p:last-of-type 選擇的這個p元素是父元素中的最後乙個注意要有子父級關係系注意可以包含多層子父級關係 :only-of-type p:only-of-type 選擇的這個p元素在父元素中只有乙個,換句話說這個父元素中只有乙個元素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) 同上，從最後乙個子元素開始計數。 :nth-of-type(n) p:nth-of-type(2) 選擇屬於其父元素第二個元素的每個元素。意思就是父元素 div 裡面的第二個子元素裡面巢狀的第二個p元素會被選中 :before p:before 在每個元素的內容之前插入內容。

:after p:after 在每個元素的內容之後插入內容。

CSS的簡介及其選擇器

CSS 選擇器簡介

css 選擇器簡介

CSS選擇器簡介

CSS的簡介及其選擇器

CSS 選擇器簡介

css 選擇器簡介

CSS選擇器簡介

相關推薦