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

CSS

009_CSS分组选择器

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

生活随笔收集整理的這篇文章主要介紹了 009_CSS分组选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 選擇器的分組

1.1. 你可以對選擇器進行分組, 這樣, 被分組的選擇器就可以分享相同的聲明。將多個選擇器放在規則左邊, 然后用逗號分隔, 就定義了一個分組。逗號告訴瀏覽器, 規則中包含多個不同的選擇器。

1.2. 可以將任意多個選擇器分組在一起, 對此沒有任何限制。

1.3. 例如, 如果您想把很多元素顯示為灰色，可以使用類似如下的規則:

body, h2, p, table, th, td, pre, strong, em {color: gray; }

2. 結合選擇器和聲明的分組

2.1. 我們可以在一個規則中結合選擇器分組和聲明分組, 就可以使用很少的語句定義相對復雜的樣式。

2.2. 下面的規則為所有標題指定了一種復雜的樣式:

h1, h2, h3, h4, h5, h6 {color: gray;background: white;padding: 30px;border: 1px solid black;font-family: Verdana; }

3. 例子

3.1. 代碼

<!DOCTYPE html> <html><head><title>CSS分組選擇器</title><meta charset="utf-8" /><style type="text/css">h1, h2, h3, h4, h5, h6 {color: gray;background: white;padding: 30px;border: 1px solid black;font-family: Verdana;}</style></head><body><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6></body> </html>

3.2. 效果圖

總結

以上是生活随笔為你收集整理的009_CSS分组选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

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