1.元素選擇器

p{ color: orange }

2.選擇器分組與聲明分組

h1,h2,h3,h4,h5,h6{ margin:0; padding:0 }

3.類選擇器

.article{ text-indent: 40px; }

4.ID選擇器

#submit{ background-color: blue }
ID選擇器不能結(jié)合使用，因為ID屬性不允許有以空格分隔的詞列表

5.屬性選擇器

img[alt] 簡單屬性選擇
a[num="1"] 根據(jù)具體屬性值選擇，要求順序一致
p[class~="warning"] 根據(jù)部分屬性值選擇

6.后代選擇器

ul li{ float: left; } 必須為祖先后代關(guān)系

7.選擇子元素

p > span { text-weight: bold; } 必須為父子關(guān)系

8.選擇兄弟元素

li + li{ text-decoration: none; } 選擇在這個元素后出現(xiàn)的所有的兄弟元素，用一個結(jié)合符只能選擇兩個相鄰兄弟中的第二個元素

9.偽類選擇器

• 鏈接偽類

a:link { color: silver }
a:visited{ text-decoration: line-through; }

• 動態(tài)偽類

input:focus{ background-color: silver; }
input:hover{ border: 1px solid silver; }
a:active{ color: orange; }

• 偽類的順序很重要，通常的建議是link visited focus hover active

• 動態(tài)偽類不應(yīng)該改變元素的大小，這樣會重繪文檔

• 靜態(tài)偽類

p:first-child{ color: red; } 選擇第一個子元素

• 結(jié)合偽類

a:link:hover{ color: red; } 未訪問懸浮
a:visited:hover{ color: orange; } 已訪問懸浮

10.偽元素選擇器

• 選擇首字母
  p:first-letter{ font-size: 150%; }
• 選擇第一行
  p:first-line{ text-indent: 40px; }
• 在之前之后添加元素
  h1:before{ content: "{{"; color: silver; }
  h1:after{ content: "}}" color: silver; }
• 所有偽元素必須放在出現(xiàn)該偽元素的選擇器的最后面
• 而p:hover span偽類選擇器則無這個限制