css選擇器設(shè)置標(biāo)簽樣式的實(shí)例代碼
發(fā)布時(shí)間：2018-11-22 14:57:12 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css選擇器設(shè)置標(biāo)簽樣式的實(shí)例代碼,需要的朋友可以參考下
css選擇器
在html標(biāo)簽上設(shè)置style可以給標(biāo)簽設(shè)置屬性：
<div style="background-color: #2459a2;height: 48px;">啊啊啊</div>
我們還可以通過(guò)<head>標(biāo)簽里設(shè)置選擇器，這樣每種樣式只需要寫一遍
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--在這里寫選擇器-->
</style>
</head>
具體的選擇器有很多種：
1、通過(guò)id來(lái)復(fù)制樣式
#i1{
background-color: #2459a2;
height: 48px;
}
在body里的標(biāo)簽這樣用：但id不能寫多個(gè)，所以還是不能多用
<div id="i1"></div>
<div id="i1"></div>但id不能寫多個(gè)（不規(guī)范）
2、通過(guò)class來(lái)復(fù)制：
/*class選擇器：用class=c1來(lái)就可以復(fù)制這個(gè)樣式，同時(shí)避免了id必須統(tǒng)一的缺陷*/
.c1{
background-color: #2459a2;
height: 60px;
}
使用的時(shí)候：
<div class="c1">1251251</div>能寫多個(gè)
<div class="c1">1251253</div>能寫多個(gè)
3、標(biāo)簽選擇器：把某一標(biāo)簽都變成這個(gè)樣式：
標(biāo)簽選擇器：把所有的div標(biāo)簽變成黑底白字
div{
background-color: black;
color: white;
}
4、層級(jí)選擇器：中間是空格
層級(jí)選擇器：把span標(biāo)簽里div標(biāo)簽弄成這個(gè)樣式
span div{
background-color: black;
color: white;
}
層級(jí)：把c1里c2里的div設(shè)置成這個(gè)樣式
.c1 .c2 div{
background-color: black;
color: white;
}
5、組合選擇器：中間是逗號(hào)
<style>
組合選擇器：#或者.都可以實(shí)現(xiàn)組合
#i1,#i2,#i3{
background-color: black;
color: white;
}
.c5,.c6,.c7{
background-color: black;
color: white;
}
</style>
6、屬性選擇器：
<style>
/*屬性選擇器：把type='text'的設(shè)成這個(gè)樣式*/
input[type='text']{
width: 100px;
height: 200px;
}
把自定義的n的值為s1的標(biāo)簽設(shè)置成這個(gè)樣式
input[n='s1']{
width: 100px;
height: 200px;
}
</style>
總結(jié)
以上所述是小編給大家介紹的css選擇器設(shè)置標(biāo)簽樣式的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇淺談html5標(biāo)簽css3的常用樣式。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-20
CSS list-style修改列表屬性控制li標(biāo)簽樣式
list_style屬性用于修改列表的屬性，list-style-type用于設(shè)置列表項(xiàng)類型，list-style-position用于設(shè)這列表項(xiàng)位置，list-style-image用于設(shè)置使用圖像替換列表項(xiàng)標(biāo)記2014-07-29- 在布局過(guò)程中為了某些需求，將html標(biāo)簽在瀏覽器居中顯示是很常見(jiàn)的做法，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-04-15
CSS list-style屬性控制li標(biāo)簽樣式示例代碼
list_style屬性用于修改列表的屬性，下面為大家介紹下CSS list-style屬性控制li標(biāo)簽樣式的具體實(shí)現(xiàn)，感興趣的朋友可以了解下2014-03-03CSS實(shí)現(xiàn)鼠標(biāo)懸停改變其他標(biāo)簽樣式的示例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)鼠標(biāo)懸停改變其他標(biāo)簽樣式的示例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-19