CSS選擇器
一鸭限、基本選擇器
1.1呼股、標(biāo)簽選擇器
標(biāo)簽屬性和值用:隔開阳啥,定義多個(gè)屬性的時(shí)候使用;隔開
-
標(biāo)簽選擇器作用于html標(biāo)簽
/* 標(biāo)簽{屬性:值} */ div{ font-size: 28px; }
1.2沸移、類選擇器
類選擇器是被通過class的方式調(diào)用
一個(gè)標(biāo)簽可以同時(shí)調(diào)用多個(gè)類選擇器,用空格隔開
-
多個(gè)標(biāo)簽可以同時(shí)調(diào)用同一個(gè)類選擇器
/* .類名{} */ .demo{ font-family: microsoft yahei; font-size: 28px; } /* ********************************************* */ /*通過class調(diào)用荣回,調(diào)用多個(gè)用空格隔開 */ <div class="demo">調(diào)用類標(biāo)簽示例</div>
1.3遭贸、id選擇器
一個(gè)id選擇器在一個(gè)Html中只能被調(diào)用一次
-
一個(gè)標(biāo)簽不能同時(shí)調(diào)用多個(gè)id選擇器
/* #id選擇器的名稱 */ #idname{ color: green; } /* ********************************************* */ <p id="idname">id選擇器調(diào)用示例<p>
1.4、通配符選擇器
- 給html中所有標(biāo)簽使用相同的樣式
/* *{} */
*{
color:#FF0000;
}
二心软、復(fù)合選擇器
復(fù)合選擇器就是兩個(gè)以上的選擇器通過不同的方式連接在一起
2.1壕吹、交集選擇器
-
既使用了標(biāo)簽選擇器又使用了類選擇器或者id選擇器
<!-- 標(biāo)簽+類(id)選擇器{} --> .classname{ font-size: 28px; } div.classname{ color: red; } div#idname{ background-color: #990000 }
2.2、后代選擇器
后代選擇器用來選擇元素或元素組的后代
-
選擇器之間用空格空開
/* 選擇器+空格+選擇器{} */ div span{ color:red; }
2.3糯累、子代選擇器
類似于后代選擇器算利,但只能作用于直接子一代
-
選擇器之間用>隔開
div>span{ color: color.rgb(255, 0, 0); }
2.4、并集選擇器
- 并集選擇器是各個(gè)選擇器用逗號(hào)連接而成泳姐,任何選擇器都行
/* 選擇器,選擇器,選擇器{} */
.choise1,#choise2,div{
font-size: 30px;
background-color: color.rgba(255, 0, 0, 0.5);
}