當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

006_CSS类选择器

發布時間：2025/4/17 CSS 52 豆豆

生活随笔收集整理的這篇文章主要介紹了 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类选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。