006_CSS类选择器
1. CSS類選擇器
1.1. 類選擇器允許以一種獨立于文檔元素的方式來指定樣式。
1.2. 該選擇器可以單獨使用, 也可以與其他元素結合使用。
1.3. 只有適當地標記文檔后, 才能使用這些選擇器。
1.4. 要應用樣式而不考慮具體設計的元素, 最常用的方法就是使用類選擇器。
2. 修改html代碼
2.1. 在使用類選擇器之前, 需要修改具體的文檔標記, 以便類選擇器正常工作。
2.2. 為了將類選擇器的樣式與元素關聯, 必須將class指定為一個適當的值。請看下面的html代碼:
<h1 class="important"> This heading is very important. </h1><p class="important"> This paragraph is very important. </p>2.3. 在上面的代碼中, 兩個元素的class都指定為important: 第一個標題(h1 元素), 第二個段落(p 元素)。
2.4.?例子
2.4.1. 代碼
<!DOCTYPE html> <html><head><title>CSS類選擇器</title><meta charset="utf-8" /><style type="text/css">.important {color: red;}</style></head><body><h1 class="important">This heading is very important.</h1><p class="important">This paragraph is very important.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>...</p></body> </html>2.4.2. 效果圖
3. 語法
3.1. 然后我們使用以下語法向這些歸類的元素應用樣式, 即類名前有一個點號(.), 然后結合通配選擇器:
*.important {color: red; }3.2. 如果您只想選擇所有類名相同的元素, 可以在類選擇器中忽略通配選擇器, 這沒有任何不好的影響:
.important {color: red; }4. 結合元素選擇器
4.1. 類選擇器可以結合元素選擇器來使用。
4.2. 例如, 您可能希望只有段落顯示為紅色文本:
p.important {color: red; }4.3. 選擇器現在會匹配class屬性包含important的所有p元素, 但是其他任何類型的元素都不匹配, 不論是否有此class屬性。選擇器p.important解釋為:"其class屬性值為important的所有段落"。因為h1元素不是段落, 這個規則的選擇器與之不匹配, 因此h1元素不會變成紅色文本。
4.4.?例子
4.4.1. 代碼
<!DOCTYPE html> <html><head><title>CSS類結合元素選擇器</title><meta charset="utf-8" /><style type="text/css">p.important {color: red;}</style></head><body><h1 class="important">This heading is very important.</h1><p class="important">This paragraph is very important.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>...</p></body> </html>4.4.2. 效果圖
5. CSS多類選擇器
5.1. 在html中, 一個class值中可能包含一個詞列表, 各個詞之間用空格分隔。例如, 如果希望將一個特定的元素同時標記為重要(important)和警告(warning), 就可以寫作:
<p class="important warning"> This paragraph is a very important warning. </p>5.2. 這兩個詞的順序無關緊要, 寫成warning important也可以。
5.3.我們假設class為important的所有元素都是粗體, 而class為warning的所有元素為斜體, class中同時包含important和warning的所有元素還有一個銀色的背景。就可以寫作:
.important {font-weight: bold; } .warning {font-style: italic; } .important.warning {background: silver; }5.4. 通過把兩個類選擇器鏈接在一起, 僅可以選擇同時包含這些類名的元素(類名的順序不限)。
5.5.?例子
5.5.1. 代碼
<!DOCTYPE html> <html><head><title>CSS多類選擇器</title><meta charset="utf-8" /><style type="text/css">.important {font-weight: bold;}.warning {font-style: italic;}.important.warning {background: silver;}</style></head><body><p class="important">This paragraph is very important.</p><p class="warning">This is a warning.</p><p class="important warning">This paragraph is a very important warning.</p><p>This is a paragraph.</p><p>...</p></body> </html>5.5.2. 效果圖
總結
以上是生活随笔為你收集整理的006_CSS类选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 005_CSS通配符选择器
- 下一篇： 007_CSS ID选择器