CSS的幾種常用選擇器
阿新 • • 發佈：2018-12-16
1.元素選擇器
把<span>標籤的內容都改成藍色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> span{ color:blue; } </style> </head> <body> <span>講完這個內容大家就可以下課了</span> <span>講完這個內容大家就可以下課了</span> <span>講完這個內容大家就可以下課了</span> <span>講完這個內容大家就可以下課了</span> </body> </html>
2.ID選擇器
將ID為div1的元素改為紅色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /* #ID的名稱{ 屬性名稱:屬性的值; 屬性名稱:屬性的值; } 注意：ID必須是唯一的 * */ #div1{ color: red; } </style> </head> <body> <!--請將JAVAEE顏色改成紅色--> <div id="div1">JAVAEE</div> <div>IOS</div> <div>ANDROID</div> </body> </html>
3.類選擇器
把class="shuiguo"的元素改成黃色 class="shucai"的元素改成綠色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- .類的名稱{ 屬性名稱:屬性的值; 屬性名稱:屬性的值; } --> <style> .shuiguo{ color: yellow; } .shucai{ color: green; } </style> </head> <body> <!-- 請將水果類,改成黃色 蔬菜類改成綠色 --> <div class="shuiguo">香蕉</div> <div class="shucai">黃瓜</div> <div class="shuiguo">蘋果</div> <div class="shucai">茄子</div> <div class="shuiguo">橘子</div> </body> </html>
選擇器的優先順序
行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*元素選擇器*/
div{
color: red;
}
/*類選擇器*/
.chifan{
color: deeppink;
}
/*ID選擇器*/
#div1{
color: greenyellow;
}
/*
按照選擇器搜尋精確度來編寫:
行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器
*/
.first{
color: green;
}
.second{
color: blue;
}
/*就近原則*/
</style>
</head>
<body>
<!--<div class="chifan" id="div1" style="color: goldenrod;">擴充套件完,就可以去吃飯啦!</div>-->
<div class="second first ">講完這個真的可以去吃飯啦!</div>
</body>
</html>