編碼的世界 / 優質文選 / 生涯

css選擇器設置標簽樣式

2022年7月16日
-   

css選擇器
在html標簽上設置style可以給標簽設置屬性：
<div style="background-color: #2459a2;height: 48px;">啊啊啊</div>

我們還可以通過<head>標簽裏設置選擇器，這樣每種樣式只需要寫一遍
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>





 <!在這裏寫選擇器>
 </style>
</head>

具體的選擇器有很多種：
1、通過id來複制樣式
#i1{
 background-color: #2459a2;
 height: 48px;
}

在body裏的標簽這樣用：但id不能寫多個，所以還是不能多用
 <div id="i1"></div>
 <div id="i1"></div>但id不能寫多個（不規範）

2、通過class來複制：
/*class選擇器：用class=c1來就可以複制這個樣式，同時避免了id必須統一的缺陷*/
.c1{
 background-color: #2459a2;
 height: 60px;
}

使用的時候：
 <div class="c1">1251251</div>能寫多個
 <div class="c1">1251253</div>能寫多個

3、標簽選擇器：把某一標簽都變成這個樣式：
標簽選擇器：把所有的div標簽變成黑底白字
div{
 background-color: black;
 color: white;
}

4、層級選擇器：中間是空格
 層級選擇器：把span標簽裏div標簽弄成這個樣式
 span div{
 background-color: black;
 color: white;
 }
 層級：把c1裏c2裏的div設置成這個樣式
 .c1 .c2 div{
 background-color: black;
 color: white;
 }

5、組合選擇器：中間是逗號
 <style>
 組合選擇器：#或者.都可以實現組合





 #i1,#i2,#i3{
 background-color: black;
 color: white;
 }
 .c5,.c6,.c7{
 background-color: black;
 color: white;
 }
 </style>

6、屬性選擇器：
 <style> 
 /*屬性選擇器：把type='text'的設成這個樣式*/
 input[type='text']{
 width: 100px;
 height: 200px;
 }
 把自定義的n的值為s1的標簽設置成這個樣式
 input[n='s1']{
 width: 100px;
 height: 200px;
 }
 </style>

 

熱門文章