1、通用選擇符（通配符）：*
CSS樣式
*{ color: #000000; }
p{color: #0000FF; }
p *{color: #FF0000;}
HTML代碼
<p>藍色</p>
<div>黑色</div>
<p>藍色，<span>紅色，</span><em>紅色，</em><strong>紅色，</strong>很神奇！</p>
效果圖
2、類選擇符：.類名
使用之前
使用之前
使用之后
使用類區分之后
源碼
<p>CSS很強大，可以控制頁面中任何元素的表現形式</p>
<p class="second">與眾不同，突出個性</p>
<p>與世界同步，做一個成功的頁面</p>
CSS樣式
3、包含選擇符（派生/后代選擇符）：元素 子元素（div p）
作用于某個元素中的子元素
示例效果：
包含選擇符例子
源碼：
-
CSS
p strong{ color: #FF0000; font-size: 18px; text-decoration: underline; } -
HTML
<p>CSS很強大，<strong>可以控制頁面中<span>任何元素</span>的表現形式</strong></p> <p class="second">與眾不同，突出個性</p> <strong>與世界同步，做一個成功的頁面</strong>
特別說明：
p span和p strong span的效果一樣
p span & p strong span
4、子選擇符（對象選擇符）：>
定義子元素對象的樣式，html同上。
效果圖：
body > strong
CSS樣式：
CSS樣式
5、相鄰選擇符：+
匹配同一父級下某個元素之后的元素，HTML代碼見包含選擇符中
效果圖：
p + strong
CSS樣式：
CSS樣式
6、屬性選擇符：是在標簽中直接使用，不能在CSS文件中
模式
- E[atttr]：具有某個屬性的所有標簽
- E[atttr="value"]：屬性值等于某個值的標簽
- E[atttr~="value"]：屬性的屬性值用空格隔開的標簽
- E[atttr|="value"]：屬性的屬性值必須以value開始及使用連字符“-”分割的標簽E
E：表示任一標簽
attr：標簽E的任一屬性
value：屬性的屬性值
注：當屬性值沒有空格只是一個單詞時，“=”、“|=”和“~=”效果一樣
示例效果圖：
屬性選擇符
CSS樣式：
HTML：
p class="paragraphs">帶class屬性的段落標簽p</p>
<a >沒有class屬性的標簽a</a>
<p>這個沒有class屬性</p>
<a class="link">帶class屬性的鏈接標簽a</a>
7、ID選擇符：#
同一個頁面中ID最好唯一
源碼
-
HTML代碼：
<p class="paragraphs">帶class屬性的段落標簽p</p> <a >沒有class屬性的標簽a</a> <p id="paragraphs">這個沒有class屬性</p> <a class="link">帶class屬性的鏈接標簽a</a> -
CSS樣式：
CSS樣式
效果圖：
8、選擇符的組合關系
- 針對性使用類選擇符或者ID選擇符
- 選擇符群組：使用英文逗號隔開多個選擇符
- 選擇符組合：選擇符之間使用空格分割且為父子關系
個人感覺選擇符組合的使用和包含選擇符一樣的
9、偽類
語法
選擇符：偽類{屬性：屬性值；}
使用對象
????經常是a標簽使用
a:link{}：鏈接默認狀態
a:visited{}：鏈接訪問后狀態
a:hover{}：鼠標放在鏈接上狀態
a:active{}：鏈接點擊時狀態
10、偽對象
在HTML文檔指定的信息之外，創建了文檔的額外信息。
語法
選擇符：偽對象{屬性：屬性值；}
使用示例
