css選擇器設置標籤樣式
css選擇器
在html標籤上設置style可以給標籤設置屬性：
<div stylex="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>
打開今日頭條，查看更多精彩圖片
※vue-cli的工程模板與構建工具
※給 Web 開發者與管理員的緩存指南
TAG:程序員小新人學習 |