選擇器: 選擇標籤的,選擇出標籤以後給標籤加樣式

常用的選擇器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>類選擇器>標籤選擇器