<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- <style>
2.頁面級css
</style> -->
<!-- 3.外部css
<link rel="stylesheet" type="text/css" href="放css地址的"> -->
<style type="text/css">
/*通配符 選擇器*/
*{
background-color: white;
}
/*屬性選擇器*/
[id="only"]{
background-color: black !important;
}
/*id 選擇器*/
#only{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
/*class選擇器*/
[class="demo"]{
background-color: blue;
}
.demo{
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 150px;
background-color: green;
border-radius: 10px;
}
.demo1{
background-color: blue;
top: 300px;
}
/*標籤選擇器*/
span{
color: red;
}
</style>
</head>
<body>
<!-- <div style="1.行間樣式"></div> -->
<!-- 選擇器 -->
<!-- 1.id選擇器一一對應的 -->
<div id="only">123</div>
<!-- 2.class選擇器多對多 -->
<div class="demo">1233</div>
<div class="demo demo1"></div>
<!-- 3.標籤選擇器 -->
<span>23123</span>
<!-- 4.通配符選擇器 -->
<!-- 優先級 !important infinity > 行間樣式 > id > class = 屬性選擇器 > 標籤選擇器 > 通配符選擇器-->
<!-- css權重決定優先級比值大 256進制-->
<form method="get" action="鏈接">
<select name="province">
<option value="beijing">beijing</option>
<option value="beijing">yinchuang</option>
<option>ningxia</option>
<!-- 有value 的輸出value 沒value的輸出innerHTML -->
</select>
<!-- 複選框 -->
<!-- 1.apple<input type="checkbox" name="friuit" value="apple" checked=""> -->
<!-- 默認選中 -->
<!-- 2.banana<input type="checkbox" name="friuit" value="banana"> -->
<!-- 3.orange<input type="checkbox" name="friuit" value="orange"> -->
<input type="submit" name="">
</form>
</body>
</html>
HTMLCSS小白——select複選框，標籤選擇器，css選擇器權重
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章