1.元素選擇器(類型選擇器)
html {color:black;}
2.選擇器分組
h2, p {color:gray;}
3.CSS 類選擇器
.important {color:red;}
4. ID 選擇器
#intro {font-weight:bold;}
5.屬性選擇器
簡單屬性選擇
img[CBD] //有CBD屬性的img元素
a[href][title] //同時有 href 和 title 屬性
具體屬性選擇
a[]
部分屬性值選擇
p[class~="important"] {color: red;} //包含class為important的元素
子串匹配屬性選擇器
[abc^="def"] //選擇 abc 屬性值以 "def" 開頭的所有元素
[abc$="def"] //選擇 abc 屬性值以 "def" 結(jié)尾的所有元素
[abc*="def"] //選擇 abc 屬性值中包含子串 "def" 的所有元素
特定屬性選擇類型
*[lang|="en"]
6.后代選擇器
h1 em {color:red;}
a#b .cls { width: 100px;}
<a id=b>
<span>1<span>
<span class=cls>2<span>
</a>
<span class=cls>3<span>
7.CSS 子元素選擇器
h1 > strong {color:red;}
8.CSS 相鄰兄弟選擇器
h1 + p {margin-top:50px;}
9.CSS 偽類
a:hover {color: #FF00FF}
10.CSS 偽元素
h1:before { content:url(logo.gif); }