CSS 選擇器(3)- 元素相對位置選擇器

康廷數位: CSS 選擇器(序)

P.S. 此範例IE不支援,請改用 Chorme 或是 Firefox

CSS選擇器可以讓你根據元素的相對位置,存取所要套用的元素,以底下的範例為例,左邊的巢狀方塊中,最外面是 div 標籤,內部配置了三個子標籤,分別是 section 與 article ,而在第一個 section 中,還有一個 section 子標籤。現在按右邊的灰色按鈕進行測試。

<div>

<section>
這是 section 的子元素
<section>
<article>
  • div section
  • div>section
  • section+section
  • div article


第一個按鈕「div section」,表示 div 的任何 section 子元素,都會被選取。
第二個按鈕「div>section」,表示 div 的第一層 section 子元素,會被選取。
第三個按鈕「section+section」,表示 section 的相鄰 section 元素都會被選取。
第四個按鈕「div article」,表示 div 的任何 article 子元素,會被選取。

康廷數位: CSS 選擇器(序)


沒有留言: