當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css-三种基本选择器

發布時間：2024/9/27 编程问答 21 豆豆

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

一、標簽選擇器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/* 標簽選擇器，會選擇到頁面上所有的這個標簽的元素 */h1{color: #12ec4e;background: #cdbb21;border-radius: 20px;}p{font-size: 80px;}</style> </head> <body> <h1>學習html</h1> <h1>學習html</h1> <p>聽世界說</p> </body> </html>

二、類選擇器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/* 類標簽的格式 .class的名稱{}好處：可以多個標簽歸類，是同一個 class，可以復用*/.label1{color: green;}.lable2{color: red;}</style> </head> <body> <h1 class="label1">lable1</h1> <h1 class="lable2">lable2</h1> <h1 class="label1">lable3</h1> <p class="label1">P標簽</p> </body> </html>

三、id選擇器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/* id選擇器： id必須保證全局唯一！#id名稱{}*/#wang1{color: red;}</style> </head> <body> <h1 id="wang1">標題1</h1> </body> </html>

3種選擇器優先級

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/* id選擇器： id必須保證全局唯一！#id名稱{}優先級：id選擇器 > class選擇器 > 標簽選擇器*/#wang1{color: red;}.style1{color: green;}h1{color: yellow;}</style> </head> <body> <h1 class="style1" id="wang1">標題1</h1> <h1 class="style1">標題2</h1> <h1 class="style1">標題3</h1> <h1>標題4</h1> <h1>標題5</h1> </body> </html>

id選擇器 > class選擇器 > 標簽選擇器

https://www.bilibili.com/video/BV1YJ411a7dy?p=5&spm_id_from=pageDriver

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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