選擇器: 選擇標簽的,選擇出標簽以后給標簽加樣式
常用的選擇器6+1種
一.標簽選擇器
語法:
標簽名 {
樣式規則
}
例如:
p {
樣式規則
}
作用: 所有的p標簽被選中 套用后面的樣式
二.id選擇器
1.語法
#id名 {
樣式規則
}
例如:
#myId1 {
樣式規則
}
作用: id值為myId1的元素會被選中,套用后面的樣式
2.使用
<p id="myId1"></p>
三.類選擇器
如果想把同一個樣式,給多個元素使用 需要使用類選擇器
1. 不帶標簽名的
語法:
.類名 {
}
例如:
.myClass1 {
樣式規則
}
作用: class屬性為myClass1的所有標簽被選中
使用
<p class="myClass1">我是p標簽</p>
2.帶標簽名
標簽名.類名 {
}
例如:
p.myClass1 {
樣式規則
}
四.組合選擇器
選擇器1,選擇器2,...選擇器n {
樣式規則
}
選擇器1、選擇器2...選擇器n 所有的選擇器 選用的元素都會套用后面的樣式
解決了代碼冗余問題
五.通配符選擇器
* {
}
作用: 該頁面中所有的元素都會被選中,套用后面的樣式
六.子代選擇器和后代選擇器
1. 子代
兒子節點
p>div {
樣式規則
}
#myId1>.myClass{
}
2.后代選擇器
后代: 兒子和子孫節點....
p div{
}
*************************注釋*********************************
CSS沒有單行注釋一說 所有的注釋 都是/**/
*******************************1 偽類*************************************
前6種選擇器 都是作用在標簽上
偽類: 不是作用在標簽上的,作用在標簽的某個具體的屬性上....
超鏈接的偽類
1. 未訪問時的狀態
a:link {
color: green;
text-decoration: none;;
}
2. 訪問后的狀態
a:visited {
color:pink;
text-decoration: none;;
}
3. 鼠標懸停
a:hover {
color:red;
font-size:30px;
text-decoration: none;;
}
4. 激活狀態(從點擊鼠標左鍵開始 到松開左鍵之間的狀態)
a:active {
color:blue;
text-decoration: none;;
}
****************************面試題:如何給一個標簽套用多個類選擇器? ***********************************
<style type="text/css">
.myClass2 {
font-size:30px;
color:green;
}
.myClass1 {
background-color:#000000;
color:red;/*CSS文件中 后定義的優先*/
}
</style>
<p class="myClass1 myClass2"></p>
如果兩個樣式中定義了相同的屬性color, 哪個起作用??
CSS文件中 后定義的優先, 而不是看class屬性后定義的...
****************************選擇器的優先級***********************************
id>類選擇器>標簽選擇器