DIV CSS 佈局教程網

這篇文章主要介紹了CSS中一些特殊的上下文選擇符的使用,是CSS入門學習中的基礎知識,需要的朋友可以參考下

子選擇符 >

格式：標簽 1 > 標簽 2
示例：

CSS Code復制內容到剪貼板

1. section > h2 {font-style:italic;}

說明：標簽 2 必須是標簽 1 的子元素，或者反過來說， 標簽 1 必須是標簽 2 的父元素。與常規的上下文選擇符不同，這個選擇符中的標簽 1 不能是標簽 2 的父元素之外的其他祖先元素。

緊鄰同胞選擇符 +

格式：標簽 1 + 標簽 2
示例：

CSS Code復制內容到剪貼板

1. h2 + p {font-variant:small-caps;}

一般同胞選擇符 ~

格式：標簽 1 ~ 標簽 2
示例：

CSS Code復制內容到剪貼板

1. h2 ~ a {color:red;}

說明：標簽 2 必須跟（不一定緊跟）在其同胞標簽 1 後面。

通用選擇符 *

格式：* {...}
示例：

CSS Code復制內容到剪貼板

1. * {color:green;}

說明：上面示例會導致所有元素（的文本和邊框）都變成綠色。
不過，一般在使用 * 選擇符時，都會同時使用另一個選擇符。
例如：

CSS Code復制內容到剪貼板

1. p * {color:red;} // 這樣只會把p包含的所有元素的文本變成紅色

還有一個非常有意思的用法，即用它構成非子選擇符：
例如：

CSS Code復制內容到剪貼板

1. section * a {font-size:1.3em;}

這樣，任何是 section 孫子元素，而非子元素的 a 標簽都會被選中。至於 a
的父元素是什麼，沒有關系。
總之，只有一個標簽名的選擇符會選中頁面中所有相同標簽的實例。而通過上下文
選擇符，則可以指定標簽必須具備相應的祖先或同胞。