前端知識路徑之常用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 元素