選擇器
解釋說明
e型別選擇器
選擇指定型別的元素(指定標籤)
e#myid
id選擇器
id等於myid的e元素,e若省略則表示id等於myid的任意元素
e.class
類選擇器
所有class等於指定class的e元素.若e省略e的用處同上
e f包含選擇器
選擇包含在e元素中的f元素.e和f可以是其它選擇器,如:e.abc f.cde
a:link
鏈結偽類
匹配已定義了href屬性的a元素
a:visited
鏈結偽類
匹配已訪問過的a元素
e:active
使用者操作偽類
選擇被激過的e元素,如被滑鼠按住
e:hover
使用者操作偽類
正被滑鼠經過的e元素
e:focus
偽選擇器
匹配獲得焦點的e元素
e::first-line
偽選擇器
e元素內的第一行文字
e::first-letter
偽選擇器
匹配e元素內的第乙個字元
選擇器解釋說明*
通配選擇器
選擇文件中所有的元素
e[foo]
屬性選擇器
匹配e元素,且它定義了foo屬性,若e省略,則表示所有定義了foo屬性的任意元素
e[foo=」bar」]
屬性選擇器
匹配e元素,且它定義了foo屬性,且值是bar,e省略的情況同上
e[foo~=」bar」]
屬性選擇器
匹配e元素,且它的foo屬性中有bar,如:將被a[title~=」bar」]匹配.
e[foo|=」en」]
屬性選擇器
匹配e元素,且它的foo屬性用 - 分隔,且值開頭是en.如:被a[title|=」en」]匹配
e:first-child
結構偽類選擇
匹配e元素,且它是父元素的第乙個子元素.
e:lang(fr)
偽類選擇器
匹配e元素,且該元素顯示內容的語言型別是fr
e::before
偽元素選擇器
匹配e元素前的內容
e::after
偽元素選擇器
匹配e元素後的內容
e>f
子包含選擇器
匹配f元素,且該元素為所匹配e的元素的子元素.
e f相鄰兄弟選擇器
匹配f元素,且它在e後
選擇器解釋
說明e[foo^=」bar」]
匹配e元素,且定義了foo屬性,屬性值字首為bar
e[foo$=」bar」]
匹配e元素,定義了foo屬性,值字尾為bar
e[foo*=」bar」]
匹配e元素,定義了foo屬性,屬性包含bar
瀏覽器相容性
iefirefox
opera
safari
chrome
ie7及以上
1.5及以上
9.0及以上
3.1及以上
1.0及以上
應用例項
顧名思議,結構偽類選擇器是利用dom實現元素過濾,也就是說它是通過文件結構之間的相互關係來進行匹配,從而減少文件內對class和平id的定義.
選擇器說明
e:root
匹配e所在文件的根元素.在html文件中,根元素就是html 標籤.
e:nth-child(n)
找出e元素,且它是你北朝鮮綿第n個子元素.n可以是數字(1,2,3),關鍵字(odd,even),公式(2n,2n 3),數字是從1開始的,不是0.如:tr:nth-child(3)匹配所有**裡第3行的trtr:nth-child(2n 1)匹配所有**的奇數行
tr:nth-child(2n)匹配所有的偶數行
tr:nth-child(odd)匹配所有的奇數行
tr:nth-child(even)匹配所有的偶數行
e:nth-last-child(n)
選擇e元素,且它是父元素的倒數第n個子元素
e:nth-of-type(n)
選擇e元素,且它是父元素所有子元素中型別為e的子元素集合中的第n個,n可以是數字(1,2,3),關鍵字(odd,even),公式(2n,2n 3),數字是從1開始的,不是0.如p:nth-of-type(2)匹配出,
中第二個p元素
e:nth-last-of-type(n)
選擇e元素,且它是父元素的倒數第n個子節點
e:last-child
找出e元素,且它是父元素中的最後乙個字節點
e:first-of-tpe
找出e元素,且它是父元素中是第乙個該型別的元素,如p:first-of-type匹配
中的第乙個p元素.
e:last-of-type
找出e元素,且它是父元素中的最後乙個該型別的元素.如:p:last-of-type匹配,
中的最後乙個p元素,它同e:nth-last-of-tpe(1)意義相同
e:only-child
找出父元素中只包括乙個的子元素,且該元素是e
e:only-of-type
選擇其父元素只包含乙個同型別的子元素,且該子元素匹配e.如p:only-of-type匹配
中的p,因為div中只包括乙個p元素
e:empty
匹配e元素,且該元素不包含子節點,注意,文字也屬於節點
瀏覽器相容性
iefirefox
opera
safari
chrome
ie9及以上
3.5及以上
9.6及以上
3.1及以上
1.0及以上
應用例項
**中行之間用不同顏色區分開.目前我們大多是在程式生成html時用個自增數除2取餘,以此來判斷是奇數行還是偶數行,然後賦給該行tr不同的class名,然後在css中定義不同的背景.有了上面的選擇器後,實現上此功能就簡單的多,tr上不用加任何class屬性.只需要在css中如下設定:
table
tr:nth-child(even)
tr:nth-child(odd)
其它應用環境:
1. web頁面上擺出保齡球,通過數學公式選中對應的球來控制其顯示位置
2. 新聞列表中可以找出第一,二,三個子元素對它加上特殊的背景以示特殊.甚至可以為每條都加上背景,如第一條加上上面有數字1的,第二個加上2.等等.
選擇器說明
e:enabled
選擇e元素,且它是可用的ui元素.通常用在表單中的控制.所以被設為disabled的元素不會被匹配出來.
e:disabled
選擇e元素,且它是不可用的,和上面的相反
e:checked
選擇被勾選的e元素,通常指checkbox,radio
瀏覽器相容性
iefirefox
opera
safari
chrome
ie9及以上
1.5及以上
9.0及以上
3.1及以上
1.0及以上
選擇器說明
e~f兄弟元素選擇器.選擇匹配f的所有元素,且匹配元素位於匹配e的後面.所以e和f在同一級上,是兄弟關係.如:div~p匹配,
中的.其它兩個p元素不會被匹配出來
e:not(s)
否定選擇器.匹配所有e元素,且不滿足s選擇器.如: div p:not(.red)匹配div中的p元素,且p元素的class不是red
e:target
目標選擇器.匹配所有e元素,且被相關url指向.如在瀏覽器後加上#red.(文件中有個元素的id是red),則這時候它被匹配出來了.
瀏覽器相容性
iefirefox
opera
safari
chrome
e ~ f
ie7及以上
1.5及以上
9.0及以上
3.1及以上
1.0及以上
e:not(s)
ie9及以上
3.0及以上
9.6及以上
3.1及以上
1.0及以上
e:target
ie9及以上
1.5及以上
9.6及以上
3.1及以上
1.0及以上
同級選擇器 CSS3選擇器大全
新增選擇器 子串匹配的屬性選擇符 e att val 匹配具有att屬性 且值以val開頭的e元素 子串匹配的屬性選擇符 e att val 匹配具有att屬性 且值以val結尾的e元素 子串匹配的屬性選擇符 e att val 匹配具有att屬性 且值中含有val的e元素 結構性偽類 e root...
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...