CSS常用選擇器

1 元素選擇器 標籤選擇器 

p {color:gray;}

h2 {color:silver;}

p h2 都是元素標籤

2 類選擇器  .className

3 ID選擇器 #ID

4 通配全選所有元素 *

*{color:red;} 對頁面上的所有元素應用此樣式

5 元素組選擇器 多個元素一起選擇

h1, h4 {color:silver; background:white;}

h1 h4 是一組 樣式相同

6 屬性選擇器

[attr] 選擇所有具有attr屬性的元素

7 後代選擇器（包括子子孫孫）

H2 p 空格間隔

8子代選擇器 選擇直系兒子代

h1 > strong 選擇h1 子代中具有strong標籤的元素

table.company td > p 類選擇器 後代選擇器 子代選擇器混合

9 兄弟選擇器 如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素

h1 + p {margin-top:50px;} 選擇p p具有一個兄弟元素h1 

html > body table + ul {margin-top:20px;} 子代 後代 兄弟

總結：

類       .

Id       #

組       ，

後代     空格

子代     >

兄弟     +

通配     *

注意各種選擇器組合使用
 

9 DOM選擇元素

querySelector和querySelectorAll是W3C提供的 新的查詢介面

querySelector只返回匹配的第一個元素，如果沒有匹配項，返回null。 

querySelectorAll返回匹配的元素集合，如果沒有匹配項，返回空的nodelist(節點陣列)。 

var obj = document.querySelector("#id");

var obj = document.querySelector(".classname");
var obj = document.querySelector("div");

var el = document.body.querySelector("style[type='text/css'], style:not([type])");

var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");
var elements = document.querySelectorAll("#id1, #id2, .class1, class2, div a, #list li img");