html css層疊樣式基礎（常用選擇器）（三）
阿新 • • 發佈：2018-12-26
1.常用選擇器：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 為所有的p元素，設定一個字型大小為30px 元素選擇器 - 作用：可以選中頁面中的所有的指定的元素 - 語法：標籤名 {} - 例子：p{} h1{} div{} a{} */ /*p { font-size: 30px; } h1 { color: red; }*/ /* 為id為p1的元素設定字型顏色為藍色 - id選擇器 - 作用：可以根據元素的id屬性值，選中唯一的一個元素 - 語法：#id屬性值 {} */ /*#p1 { color: cornflowerblue; }*/ /* 為 汗滴禾下土 和 誰知盤中餐 設定一個黃色的背景 - 類選擇器 - 作用：可以根據元素的class屬性值選中一組元素 - 語法：.class屬性值 {} * */ /*.p2{ background-color: yellow; }*/ /* 為class為p3的 和 div 和 span元素設定一個字型顏色為綠色 - 選擇器分組（並集選擇器） - 作用：可以選中多個選擇器對應的元素 - 語法：選擇器1 , 選擇器2 , 選擇器N {} */ /*.p3 , div , span{ color: green; }*/ /* * 為class為t1的span設定一個背景顏色為紅色 * - 交集選擇器 * - 作用：可以選中同時符合多個條件的元素 * - 語法：選擇器1選擇器2選擇器N {} */ /*span.t1{ background-color: red; }*/ /* * 通配選擇器 * - 作用：可以選中頁面中的所有的元素 * - 語法：* { } * - 通配選擇器的效能較差，儘量少用 */ * { font-size: 50px; } </style> </head> <body> <h1>憫農</h1> <p id="p1">鋤禾日當午</p> <!-- 在html中還有一個屬性和id類似，class屬性 class屬性是用來為頁面中的元素分組的，它的使用規則和id一樣，不同的是在頁面中可以出現相同的class屬性值 class屬性值相同的元素我們認為是一組元素 可以為一個元素同時指定多個class，多個class值之間使用空格隔開 --> <p class="p2 p4 p5 p6 p7 p8">汗滴禾下土</p> <p class="p2">誰知盤中餐</p> <p class="p3">粒粒皆辛苦</p> <div class="t1">我是div</div> <span>我是span</span> <span class="t1">我也是一個span</span> </body> </html>