CSS學習 選擇器

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

css1 中的選擇器

e #myid         id選擇器

e .warning 類選擇器
e f 包含選擇器
e:link 定義超連結未被訪問
e:actice 匹配被啟用的元素
e：hover 滑鼠經過的元素
e：focus 獲取焦點
e::first-line 元素第一行
e::first-letter 元素第乙個字元

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

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 相鄰兄弟選擇器 後面的兄弟

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指定特定的元素，在.前面加乙個類名 這個段落是藍色 標籤選擇器 直接用標...