CSS3中提供了許多實(shí)用的查找選擇器,可以快速地定位到需要樣式化的元素,以下是其中幾個常用的選擇器:
/* id選擇器 */ #my-id { /* 樣式 */ } /* class選擇器 */ .my-class { /* 樣式 */ } /* 元素選擇器 */ p { /* 樣式 */ } /* 后代選擇器 */ .parent .child { /* 樣式 */ } /* 子元素選擇器 */ .parent >.child { /* 樣式 */ } /* 兄弟元素選擇器 */ .sibling ~ .target { /* 樣式 */ } /* 鄰接選擇器 */ .sibling + .target { /* 樣式 */ } /* 屬性選擇器 */ [target="_blank"] { /* 樣式 */ } /* 偽類選擇器 */ a:hover { /* 樣式 */ } /* 偽元素選擇器 */ ::before { /* 樣式 */ }
上述選擇器可以單獨(dú)使用,也可以結(jié)合使用,例如:
/* 后代選擇器與偽類選擇器 */ .parent p:hover { /* 樣式 */ } /* 類選擇器與偽元素選擇器 */ .my-class::before { /* 樣式 */ } /* 屬性選擇器與偽元素選擇器 */ [target="_blank"]::after { /* 樣式 */ }
除了以上常用的選擇器以外,還有很多其他的選擇器,可以根據(jù)需要靈活使用,加快開發(fā)效率。