CSS學習 選擇器

2021-08-27 16:03:55 字數 1573 閱讀 5264

學習目的 熟練使用 css 選擇器

css1 中的選擇器

e #myid         id選擇器

e .warning 類選擇器

e f 包含選擇器

e:link 定義超連結未被訪問

e:actice 匹配被啟用的元素

e:hover 滑鼠經過的元素

e:focus 獲取焦點

e::first-line 元素第一行

e::first-letter 元素第乙個字元

css2

*               通配選擇文件中所有元素

e[foo] 包含foo屬性的元素

e[foo="bar"] 包含屬性foo值為bar的元素

css3 中的選擇器可替代 了解即可

e[foo~="bar"] 含有屬性foo值包括bar的元素例如 "bar bar1 bar2">link

e[foo|="en"] 屬性值是乙個「-」分割的 比如 en-us

e:first-child 父元素的第乙個子元素

e:lang(fr) 匹配屬性,元素顯示內容為語言為 fr

e::before 在元素前面插入內容

e::after 在元素後面插入內容

e>f 子包含

e+e 相鄰兄弟選擇器 後面的兄弟

css3

e[foo^="bar"]   屬性foo的值開頭是bar

e[foo$="bar"] 屬性foo的值得結尾是bar

e[foo*="bar"] 屬性foo的值包含bar "abc_bar_as">link

結構類選擇器

e:root 屬性文件所在的根元素

e:nth-child(n) e元素第n個位置的子元素 n可以是 (1,2,3) 關鍵字(odd,even) 公式(2n,2n+3) 起始值為1

e:nth-last-child(n) 與上面的使用方法一樣 倒數的第n個位置的子元素

e:nth-of-type(n) 匹配父元素中與e相同的元素中的第n個元素

e:nth-last-of-type(n) 匹配父元素中與e相同的倒數第n個元素

e:last-child 選擇位於其父元素的最後乙個位置,且匹配e的子元素

e:first-of-type 選擇在其父元素中匹配e的第乙個同型別的子元素

e:last-of-type 選擇在其父元素中匹配e的最後乙個同型別的子元素

e:only-child 選擇其父元素只包含乙個子元素,且該子元素匹配e

e:only-of-type 選擇其父元素只包含乙個同型別的子元素,且該子元素匹配e

e:empty 選擇匹配e的元素,且該元素不包含子節點,文字也是節點

e~f 通用兄弟選擇器

e:not(s) 否定偽類選擇器

css選擇器學習

本片文章主要講解html5中css選擇器,通過選擇器定位到想要進行樣式設定的元素。當前css選擇已經發布到第三代,也就是css3選擇器。css3選擇器分為 基本選擇器,復合選擇器,偽元素選擇器。1.1 代表通用選擇器,選擇所有元素 1.2 type選擇器 元素選擇器 選擇指定的元素 1.3 id選擇...

CSS選擇器學習

選擇所有節點 container 選擇id為container的節點 container 選取所有class包含container的節點 li a 選取所有li下的所有a節點 ul p 選擇ul後面的第乙個p元素 div container ul 選取id為container的div的第乙個ul子元...

CSS學習 選擇器

css學習 選擇器id是只適用於乙個,用 開頭表示這是id選擇器 hello world 這個段落不受樣式的影響 類選擇器 class可以在多個元素中使用,用.開頭表示這是class選擇器 標題居中 段落居中 也可以用class指定特定的元素,在.前面加乙個類名 這個段落是藍色 標籤選擇器 直接用標...