使用CSS3 選擇器——筆記

CSS通過選擇器控制HTML元素，CSS選擇器對網頁對象可以實現一對一、一對多或者多對一的匹配。

一、CSS3選擇器分類

　　CSS選擇器在CSS2.1選擇器的基礎上新增了屬性選擇器、偽類選擇器、過濾選擇器，減少了對HTML類名或ID名的依賴，避免了對HTML結構的幹擾，使編寫代碼更加簡單輕松。

　　根據所獲取頁面中元素的不同，可以把CSS3選擇器分為5大類：基本選擇器、組合選擇器、偽類選擇器、偽元素和屬性選擇器。其中，偽類選擇器又分為6種：動態偽類選擇器、目標偽類選擇器、語言偽類選擇器、UI元素狀態偽類選擇器、結構偽類選擇器和否定偽類選擇器。

二、基本選擇器

　　這裏講基本的CSS選擇器：標簽選擇器、類選擇器、類選擇器、ID選擇器和通配選擇器。

2.1 標簽選擇器(CSS中使用率最高的一類選擇器)

　　標簽選擇器直接引用HTML標簽名稱，也稱為類型選擇器，類型選擇器規定了網頁元素在頁面中默認的顯示樣式。因此，標簽選擇器可以快速、方便地控制頁面標簽的默認顯示效果。

<style type="text/css">
p{
  font-size:12px; /*字體大小為12像素*/
  color:red; /*字體顏色為紅色*/
}
</style>

　　通過標簽選擇器，統一定義網頁中段落文本的樣式為:段落內文本大小為12像素，字體顏色為紅色。

2.2 類選擇器

　　類選擇器能夠為網頁對象定義不同的樣式，實現不同元素擁有相同的樣式，相同元素的不同對象擁有不同的樣式，類選擇器以一個(.)前綴開頭，然後跟隨一個自定義的類名。

CSS3 選擇器——筆記+實戰案例