CSS3中提供了層次選擇器,可以通過元素之間的父子或祖先關系來選中指定的元素。在CSS3中,層次選擇器有四種,分別是:
1.E F
:選擇所有 E 元素內部的 F 元素; 2.E >F
:選擇所有父元素是 E 的 F 元素; 3.E + F
:選擇緊接在 E 元素后面的 F 元素; 4.E ~ F
:選擇所有和 E 元素在同一父級下的 F 元素。
下面用代碼來具體說明:
div p { color: red; }div >.test { color: blue; }div + h1 { color: green; }div ~ span { color: orange; }
層次選擇器可以幫助我們更方便地選擇元素,但也需要慎用,過度使用可能會影響CSS的性能。