CSS選擇器的分類以及基本用法
1.ID選擇器
使用id選擇器：在元素上面增加一個id屬性,id屬性的屬性值不用用數字開頭
一個頁面中只能有一個id屬性值
css中id選擇的表示方法用 # 表示
#div01{
width: 100px;
height: 100px;
background-color: #ff0;
}
2.class選擇器
使用class選擇器：在元素上增加一個class屬性，class屬性的屬性值不能用數字開頭
一個頁面中可以有多個class屬性值
css中class選擇器的表示方法用 . 表示
.d1{
width: 200px;
height: 200px;
background-color: #00f;
}
3. 標簽選擇器
直接寫標簽名
a,input,button{
width: 200px;
height: 200px;
background-color: #00f;
}
4.組合選擇器
選擇器直接用,分隔開即可
5.子代選擇器
> 只針對子代
.grand{
width: 500px;
height: 500px;
background-color: #f00;
}
6.后代選擇器
用空格表示，包含着子代選擇器
.grand .son{
width: 300px;
height: 300px;
background-color: #000;
}
7.通用選擇器
* 針對於所有的標簽
*{
border: 10px solid #f00;
}
整體實例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div01{
width: 100px;
height: 100px;
background-color: #ff0;
}
.d1{
width: 200px;
height: 200px;
background-color: #00f;
}
a,input,button{
width: 200px;
height: 200px;
background-color: #00f;
}
.grand{
width: 500px;
height: 500px;
background-color: #f00;
}
.grand .son{
width: 300px;
height: 300px;
background-color: #000;
}
*{
border: 10px solid #f00;
}
</style>
</head>
<body>
<div id="div01"></div>
<div class="d1"></div>
<p class="d1"></p>
<a href="">內容</a>
<input type="text" />
<button></button>
<div class="grand">
grand
<div class="father">
father
<div class="son">
son
</div>
</div>
</div>
運行結果如圖
接上圖
接上圖
