CSS 複合選擇子(Combinators Selector)

法力無邊的- 通用選擇器(選擇子)

* { color: red; }

以星號 * 做為選擇器 ,那麼網頁所有的一切 都會被套用 {}內的css

什麼是 複合選擇器?

就是可以結合多個簡單選擇器來作進一步的篩選。

(聽不懂吧?沒關係!下方有實驗欄位,動手實驗一下就能體會)

以下是7個不同的複合選擇器

1. Descendant combinator(後代選擇器)(css3)

寫法
div p
{
background-color:yellow;
}

2. Child combinator(子選擇器)(css3)

寫法
div > p
{
background-color:yellow;
}

3. Adjacent sibling combinator(同層相鄰選擇器)(css3)

Ea + Eb, 以 + 符號分隔2個選擇器,表示若Ea跟Eb如果在同一層而且Eb為Ea的下一個元素時就會被套用css

寫法
div+p
{
background-color:yellow;
}

4. General sibling combinator(同層全體選擇器)(css3)

Ea ~ Ec,以 ~ 符號分隔2個選擇器(子),表示在與Ea元素同一層的Ec元素都會被套用

寫法
div~p
{
background-color:yellow;
}

5. Groups of selectors(群組選擇器)

Ea , Eb,以 , 符號分隔2個選擇器,表示在與Ea跟Eb元素都會被套用

寫法
div ,p
{
background-color:yellow;
}

6. Pseudo-classes(偽類選擇器)

常用的例子 a:hover a:visited ...
:active          滑鼠按下的樣式
:first-child 第一個元素的樣式
:focus 目標為焦點的樣式
:hover 滑鼠移入的樣式
:lang(C) 當語言為C的樣式
:link 連結平常的樣式
:visited 連結過的元素的樣式

7. Pseudo-elements(偽元素選擇器)

:first-line        元素的第一行會套用
:first-letter 元素的第一個字母會套用 例 : p:first-child { color:blue; } 例 : p:first-child i { color:blue; } 例 : p > i:first-child { color:blue; }

7a. Pseudo-classes(偽類選擇器)

語法:

selector:pseudo-class {property屬性:value值;}

selector.class:pseudo-class {property屬性:value值;}

應用:

a:link {color:#FF0000;}      /* 尚未點擊連結 */
a:visited {color:#00FF00;}   /* 已連結進入 */
a:hover {color:#FF00FF;}     /* mouse over link */
a:active {color:#0000FF;}    /* selected link */

Pseudo-classes偽類 and CSS Classes類

a.red:visited {color:#FF0000;}

<a class='red' href='revier.php'>hello</a>

Descendant combinator(後代選擇器)

Ea Eb, 以空白分隔2個選擇器,表示css會套用在Ea元素裡所有的Eb元素

在下例的css 語法中,div p,指在這div內包的p元素,通通加背景色,div區外則不受影響

這可輕意批次的變化網頁元素顯示樣貌,節省工作時間

實驗Child combinator(子代選擇器)

Ea > Eb, 以 > 符號分隔2個選擇器(子),表示會套用在Eb元素是Ea元素的子代,而Ea跟Eb中間若還有其他的元素就不是其子代了