1. 程式人生 > >前端知識路徑之常用css選擇器

前端知識路徑之常用css選擇器

這裡將css選擇器分為以下幾類:

1.通過*或標籤名來選擇

2.通過標籤的id和class選擇,表現為#id和.class

3.通過標籤之間的層級關係來選擇

div p 選擇div內的所有p標籤

div>p 選擇父元素為div的所有p標籤

div+p 選擇div之後的所有兄弟p標籤

4.通過標籤屬性選擇

[title]選擇帶有title屬性所有標籤

[title=abc]選擇title 屬性等於abc所有標籤

[title~=abc]選擇title 屬性包含abc所有標籤

[att^=abc]選擇att 屬性以abc開頭的所有標籤

[att$=abc]選擇att 屬性以abc結尾所有標籤

[att|=abc] 選擇 att 屬性值以"-"分割,以 "en" 開頭的所有元素

5.通過在a標籤上的操作

a:link選擇所有未被訪問的連結

a:hover 選擇滑鼠指標位於其上的連結

a:visited 選擇所有已被訪問的連結

a:active 選擇活動連結

6.通過偽類選擇

E:before  在每個 E 元素的內容之前插入內容

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

E:first-of-type   選擇屬於其父元素的首個 E 元素的所有 E 元素。

E:last-of-type   選擇屬於其父元素的最後 E 元素的所有 E 元素。

E:nth-of-type(n)  選擇屬於其父元素唯一的 E 元素的所有 E 元素

E:empty  選擇沒有子元素的每個 E 元素

E:checked  選擇每個被選中的 E 元素

E:disabled  選擇每個禁用的 E 元素

E:last-child  選擇屬於其父元素最後一個子元素的所有 E 元素

E:nth-child(n)  選擇屬於其父元素的第n個子元素的所有 E 元素