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

CSS

004_CSS元素选择器

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

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

1. CSS選擇器用于"查找"(或選取)要設置樣式的html元素。

2. CSS元素選擇器/類型選擇器

2.1. 元素選擇器匹配文檔元素的名稱。元素選擇器匹配文檔樹中該元素名稱的每一個實例。

2.2. 最常見的CSS選擇器是元素選擇器。換句話說, 文檔的元素就是最基本的選擇器。

2.3. 在W3C標準中, 元素選擇器又稱為類型選擇器(type selector)。

2.4.?元素選擇器通常是某個html元素, 比如: p、h1、em、a, 甚至可以是html本身。

3. 使用元素選擇器設置html的樣式

3.1. 代碼

<!DOCTYPE html> <html><head><title>CSS元素選擇器</title><meta charset="utf-8" /><style type="text/css">html {color: red;}h1 {color: blue;}h2 {color: silver;}</style></head><body><h1>這是 heading 1</h1><h2>這是 heading 2</h2><p>這是一段普通的段落。</p></body> </html>

3.2. 效果圖

4. 聲明分組

4.1. 我們既可以對選擇器進行分組, 也可以對聲明分組。

4.2. 假設您希望所有h1元素都有紅色背景, 并使用28像素高的Verdana字體顯示為藍色文本, 可以寫以下樣式:

h1 {font: 28px Verdana; } h1 {color: blue; } h1 {background: red; }

4.3. 但是上面這種做法的效率并不高。尤其是當我們為一個有多個樣式的元素創建這樣一個列表時會很麻煩。相反, 我們可以將聲明分組在一起:

h1 {font: 28px Verdana;color: blue;background: red; }

總結

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

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