1.後代選擇器(重要)
後代選擇器又稱為包含選擇器,可以選擇父元素裡面子元素。其寫法就是把外層標籤寫在前面,內層標籤寫在後面,中間用空格分隔。當標籤發生巢狀時,內層標籤就成為外層標籤的後代。
語法:
元素1 元素2
上述語法表示選擇元素1裡面的所有元素2 (後代元素)。
例如:
ul li/★選擇ul裡面所有的li標籤元素*/
2.子選擇器(重要)
子元素選擇器(子選擇器)只能選擇作為元素的最近一級子元素。簡單理解就是選親兒子元素.
語法:
元素1>元素2
上述語法表示選擇元素1裡面的所有直接後代(子元素)元素2。
例如:
div>p/*選擇div裡面所有最近一級p標籤元素*/
3.並集選擇器(重要)
並集選擇器可以選擇多組標籤同時為他們定義相同的樣式。通常用於集體宣告.
並集選擇器是各選擇器通過英文逗號(, )連線而成,任何形式的選擇器都可以作為並集選擇器的一部分。
語法:
元素1,元素2
上述語法表示選擇元素1和元素2。
例如:
ul,div /* 選擇ul和div標籤元素*/
4.偽類選擇器
偽類選擇器用於向某些選擇器新增特殊的效果,比如給鏈結新增特殊效果,或選擇第1個,第n個元素。
偽類選擇器書寫最大的特點是用冒號(:)示,比如:hover、:first-child 。
因為偽類選擇器很多,比如有鏈結偽類、結構偽類等,所以這裡先給大家講解常用的鏈結偽類選擇器。
a:link
/★選擇所有未被訪問的鏈結*/
a:visited /* 選擇所有已被訪問的鏈結*/
a:hover
/*選擇滑鼠指標位於其上的鏈結*/
a:active
/*選擇活動鏈結(滑鼠按下未彈起的鏈結) */
一:鏈結偽類選擇器注意事項
1.為了確保生效,請按照lvha的循順序宣告:link - :visited - :hover - :active。
2.記憶法:lovehate。
3.因為a鏈結在瀏覽器中具有預設樣式,所以我們實際工作中都需要給鏈結單獨指定樣式。
二:鏈結偽類選擇器實際工作開發中的寫法:
/*a是標籤選擇器 所有的鏈結*/
a /* :hover 是鏈結偽類選擇器滑鼠經過*/
a: hover
5.focus偽類選擇器
focus偽類選擇器用於選取獲得焦點的表單元素。
焦點就是游標, -般情況類表單元素才能獲取,因此這個選擇器也主要針對於表單元素來說。
input : focus
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...
CSS 復合選擇器
以前介紹了3種 標記選擇器 類別選擇器 id選擇器 基本的選擇器,以這3種基本選擇器為基礎,通過組合,還可以產生更多種類的選擇器,實現更強 更方便的選擇功能,復合選擇器就是由基本選擇器通過不同的連線方式構成的。復合選擇器就是兩個或多個基本選擇器,通過不同方式連線而成的選擇器。1.交集 選擇器 交集 ...
CSS復合選擇器
css復合選擇器 復合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。交集選擇器 交集選擇器由兩個選擇器構成,其中第乙個為標籤選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,如h3.special。記憶技巧 交集選擇器 是 並且的意...