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

CSS

CSS学习03之基本选择器

發布時間：2025/3/21 CSS 28 豆豆

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

回顧

有三種插入樣式表的方法：

外部 CSS

<link rel="stylesheet" href="css/style.css">

內部 CSS

<style>h2{color: green;}</style>

行內 CSS

<p style="text-align: center; color: red">xxxx</p>

基本選擇器

什么是選擇器

在 CSS 中，選擇器是選取需設置樣式的元素的模式。

作用

CSS 選擇器用于“查找”（或選取）要設置樣式的 HTML 元素。

種類

我們將css選擇器簡單分為四類：

基本選擇器

層次選擇器

偽類選擇器

屬性選擇器

而我們這一章就是來了解這第一種也是比較常見，重要的選擇器：基本選擇器！
基本選擇器又分為三種方式：

標簽選擇器

id選擇器

類選擇器

示例

為了方便我直接使用了內部樣式！
話不多說上代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>基本選擇器</title><style>h1{color: red;background: green;border-radius: 5em;padding: 1em;}p{color: blue;background: red;border-radius: 50px;position: absolute;}</style><style>.zxs{color: red;}.zxs2{color: blue;}</style><style>#zxs520{color: hotpink;}#zxs52{color: deeppink;}</style> </head> <body> <h1>學習Java</h1> <h2 class="zxs">學習Java</h2> <h2 class="zxs2">學習Java</h2> <h3 id="zxs520">標題3</h3> <h4 id="zxs52">標題4</h4> <p>聽狂神講解的</p> </body> </html>

測試效果

小結

優先級：不遵循就近原則，固定的
id選擇器>class選擇器>標簽選擇器
id必須保證全局唯一,最好不要數字開頭

作者有話說

博客創作不易，希望看到這里的讀者動動你的小手點個贊，如果喜歡的小伙伴可以一鍵三連，作者大大在這里給大家謝謝了。

總結

以上是生活随笔為你收集整理的CSS学习03之基本选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

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