D 02_CSS中的選擇器(常用的三種)
阿新 • • 發佈：2018-12-26
CSS中的選擇器
基本選擇器
1,元素選擇器
HTML標籤又名HTML元素。
元素選擇器：即以HTML標籤名作為選擇器名稱。
作用：選擇CSS樣式程式碼 作用於 對應標籤名的標籤上。
l 格式：
標籤名{
/*CSS樣式程式碼*/
}
適用範圍：適用於將相同樣式 作用在多個同名標籤上
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--css最入門用style來設定,格式規範--> <style> span { /*元素選擇器:(html元素標籤來設定) * span表示的選擇器,大括號後面是樣式宣告 * css註釋和java一樣的 */ font-size:70px; color: red; border: 1px solid royalblue ; } </style> </head> <body> <span>11111112222222</span> <span>22222222222222</span> </body> </html>
2,類選擇器
每個HTML標籤都有一個class屬性，class屬性值即為類名
類選擇器：即以HTML的類名（class屬性值）作為選擇器名稱。
作用：選擇CSS樣式程式碼 作用於 對應類名的HTML標籤上
l 格式：
.類名{
/*CSS樣式程式碼*/
}
適用範圍：適用於將樣式 一次作用在相同類名的標籤上。（即使標籤名不同）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /* * 類選擇器 * 用.加上類名 */ .dred{ color: red; } .sred{ color: red; } </style> </head> <body> <span>span1我是黑色</span> <span class="sred">span2我是紅色</span> <div >div1我是黑色</div> <div class="dred">div2我是紅色</div> </body> </html>
3,id選擇器
每個HTML標籤都有一個id屬性，id的屬性值必須在本頁面是唯一的。
id選擇器：即以HTML的id（id屬性值）作為選擇器名稱。
作用：選擇CSS樣式程式碼 作用於 某個規定id值的html標籤上
格式：
#id值{
/*CSS樣式程式碼*/
}
適用範圍：適用於將樣式 作用某個標籤上。（更有針對性）
注意：
必須手動保證ID值在本頁面唯一。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * id選擇器,用#加上id來進行設定 * * 優先順序 * ID選擇器>類選擇器>div選擇器 */ #d1 { color: red; } #d2 { background-color: aquamarine; } .s{ color: green; } </style> </head> <body> <span class="s">span1我是黑色</span> <span>span2我是紅色</span> <div id="d2">div1我是黑色</div> <div id="d1">div2我是紅色</div> </body> </html>