CSS基礎知識——選擇器

選擇器

• 元素選擇器#
  • 文檔元素爲最基本的選擇器
  • 例子：div{屬性:值};
• 選擇器分組
  • 例子：h2,p{屬性:值}; 表示符合這兩種規則的元素設置相同的屬性值
• 通配選擇器
  • • 表示全部元素

• 類選擇器
  - 應用樣式而不考慮具體涉及的元素 只須要在元素中設置class屬性。例如：.header{屬性:值}
  - 多類選擇器 .header .info{屬性:值}

• Id選擇器
  - 根據元素的ID設置樣式屬性值 例如：#divId2{屬性:值}

• 屬性選擇器
  - 根據元素的屬性值，來選擇元素： 例如： a[href][title]{屬性:值}
  - 根據具體的屬性值來選擇元素，例如：intput[type="text"]{屬性:值}
  - 根據部分屬性值選擇，例如：
  - 「^ 」 表示以什麼開頭 例如：div[class^="cloud"]{屬性:值}
  - 「$」 表示以什麼結尾 例如：div[class$="cloud"]{屬性:值}
  - 「*」 表示含有什麼元素 例如：div[class*="cloud"]{屬性:值}

• 後代選擇器
  - 表示後代中含有的元素，例如：div p{屬性:值},表示div中全部p元素
  - 選擇子元素，例如：div>p 表示div中的直接子元素爲p的元素

• 僞類選擇器
  - 鏈接僞類 :link 表示未訪問的地址，:visited 表示已訪問地址
  - 動態僞類 :focus 表示當前擁有輸入焦點的元素 :hover 表示指針停留在哪一個元素上 :active 激活某元素

• 僞元素選擇器
  - :first-letter 首個字母 :first-line 首行
  - :before 在元素前 :after 在元素後 例如： div:after{content:"test"}