延續上篇繼續來介紹ＣＳＳ選擇器

首先來補充一下上一篇介紹過的

5. Attribute selector 屬性選擇器

有以下幾種使用方法：

selector[attri] (上一篇提及過，詳見上篇)

selector[attri=value] (上一篇提及過，詳見上篇)

selector[attri^=value] 這跟前一個用法類似，但是使用 ^= 意思是只要字首部分有符合就可以例如 ^= abc 的話 abcd 跟 abcde 都會被選到

selector[attri$=value] 使用 $= 意思是字尾部分有符合條件就可以例如 $= abc 的話 xyabc 跟 xyzkabc 都會被選到

selector[attri*=value] 使用 *= 的意思是字串當中，至少有一段字符合條件即可，例如 *= abc 的話 xyzabcde 跟 xyabcdedf 就都會被選到

selector[attri|=value] 這有點難解釋，請見參考資料

selector[attri~=value] 請見參考資料

參考資料與範例說明

接著，來介紹新的：

8. Adjacent sibling combinator 同層相鄰選擇器：

使用 + 區隔兩個元素，例如 p + div 表示在與 p 同一層關係的相鄰 div 元素才會套用(只能在 p 之後)

9. General sibling combinator 同層全體選擇器

使用 ~ 區隔兩個元素，例如 div ~ h1 表示在與 div 同一層關係的 h1 元素全部都會套用(只能在 div 之後)

10. Groups of selectors 群組選擇器

同時選取多個元素 例如： div, p, h1, h3 可以同時選取他們！

實例：

ＨＴＭＬ：

<meta charset="UTF-8">

<title>exercise8</title>

<link rel="stylesheet" href="sample8.css">

<h1>我是h1</h1>

<h2>我是h2</h2>

<p>我是p</p>

<h3>我是h3</h3>

<div>我是div</div>

<p>我是第二個p</p>

ＣＳＳ

/*同層相鄰選擇器： 找出元素相鄰的元素*/

h2 + p{

color : red;

}

/* 同層全體選擇器 */

h2 ~ p{

background-color: yellow;

}

/* 群組選擇器: 同時選取多個元素*/

h1, h2, h3, div {

color: green;

}

ＤＥＭＯ：