層次選擇器

例：

<divclass="left">
<divclass="left">
</div>
<pclass="left"></p>
<spanclass="left"></span>
</div>

div.leftdiv裡面所有後代
div>.left後代第一個
div.left元素本身
div+.left下一個兄弟節點
div~.left所有兄弟節點

屬性選擇器

例：

<divclass="nav">張三</div>
<divclass="san">李四</div>
<divclass="two">王五</div>
<divclass="navs">趙六</div>
<divclass="nav">王雪</div>

<divclass="top-navs">小明</div>

<divclass="topnav">小李</div>

<divclass="topnavs">小孩</div>



屬性選擇器用法詳細解析：

//表示所有包含class="nav"的屬性會有黃色背景

[class="nav"]{
background-color:yellow;
}

//表示所有包含class"的屬性會有黃色背景

[class]{
background-color:yellow;
}

//

[class^="top"]

//屬性包含nav的所有會變成黃色背景。

[class~=nav]{
background-color:yellow;
}

//class屬性以"top"開頭的所有元素：

註釋：值必須是完整或單獨的單詞，比如class="top"或者後跟連字元的，比如class="top-text"。

[class|=top]{
background-color:yellow;
}

//下例選取class屬性以"top"開頭的所有元素：

[class^="top"]{
background-color:yellow;
}

//下例選取class屬性以"s"結尾的所有元素：

提示：值不必是完整單詞！

[class$="s"]{
background-color:yellow;
}

//下例選取class屬性包含"a"的所有元素：

提示：值不必是完整單詞！

[class*="a"]{
background-color:yellow;
}