css-三种基本选择器
生活随笔
收集整理的這篇文章主要介紹了
css-三种基本选择器
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、標(biāo)簽選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/* 標(biāo)簽選擇器，會(huì)選擇到頁(yè)面上所有的這個(gè)標(biāo)簽的元素 */h1{color: #12ec4e;background: #cdbb21;border-radius: 20px;}p{font-size: 80px;}</style> </head> <body> <h1>學(xué)習(xí)html</h1> <h1>學(xué)習(xí)html</h1> <p>聽(tīng)世界說(shuō)</p> </body> </html>二、類(lèi)選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/* 類(lèi)標(biāo)簽的格式 .class的名稱(chēng){}好處： 可以多個(gè)標(biāo)簽歸類(lèi)，是同一個(gè) class，可以復(fù)用*/.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標(biāo)簽</p> </body> </html>三、id選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/* id選擇器： id必須保證全局唯一！#id名稱(chēng){}*/#wang1{color: red;}</style> </head> <body> <h1 id="wang1">標(biāo)題1</h1> </body> </html>3種選擇器優(yōu)先級(jí)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/* id選擇器： id必須保證全局唯一！#id名稱(chēng){}優(yōu)先級(jí)：id選擇器 > class選擇器 > 標(biāo)簽選擇器*/#wang1{color: red;}.style1{color: green;}h1{color: yellow;}</style> </head> <body> <h1 class="style1" id="wang1">標(biāo)題1</h1> <h1 class="style1">標(biāo)題2</h1> <h1 class="style1">標(biāo)題3</h1> <h1>標(biāo)題4</h1> <h1>標(biāo)題5</h1> </body> </html>
id選擇器 > class選擇器 > 標(biāo)簽選擇器
https://www.bilibili.com/video/BV1YJ411a7dy?p=5&spm_id_from=pageDriver
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的css-三种基本选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 修改npm默认全局安装路径
- 下一篇： 宝塔面板常用命令