HTML鞏固練習之CSS選擇器基礎
阿新 • • 發佈：2018-12-25
常用選擇器：
1、元素選擇器：“選中“”相同的元素，然後對相同的元素設定同一個CSS樣式。
程式碼編寫：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>元素選擇器</title> <style type="text/css"> div{color:red;} </style> </head> <body> <div>綠葉學習網</div> <p>綠葉學習網</p> <span>綠葉學習網</span> <div>綠葉學習網</div> </body> </html>
瀏覽器執行效果：
2、id選擇器：為一個元素設定一個id，然後針對這個id的元素進行CSS樣式操作。注意在同一個頁面中，不允許出現兩個相同的id。
程式碼編寫：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>id選擇器</title> <style type="text/css"> #lvye {color:red; } </style> </head> <body> <div>綠葉學習網</div> <div id="lvye">綠葉學習網</div> <div>綠葉學習網</div> </body> </html>
瀏覽器執行效果：
3、class選擇器：也就是”類選擇器”，可以對”相同的元素”或者”不同的元素”設定一個class（類名），然後針對這個class的元素進行CSS樣式操作。
程式碼編寫：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>class選擇器</title> <style type="text/css"> .lv {color:red;} </style> </head> <body> <div>綠葉學習網</div> <p class="lv">綠葉學習網</p> <span class="lv">綠葉學習網</span> <div>綠葉學習網</div> </body> </html>
瀏覽器執行效果：
4、子元素選擇器：選中某個或某一類元素下的子元素，然後對孩子元素設定CSS樣式。
程式碼編寫：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>子元素選擇器</title>
<style type="text/css">
#father1 div {color:blue;}
#father2 #p1 {color:red;}
</style>
</head>
<body>
<div id="father1">
<div>綠葉學習網</div>
<div>綠葉學習網</div>
</div>
<div id="father2">
<p id="p1">綠葉學習網</p>
<p id="p2">綠葉學習網</p>
<span>綠葉學習網</span>
</div>
</body>
</html>瀏覽器執行效果：
5、相鄰選擇器：就是選中該元素的下一個兄弟元素，注意它的操作物件是該元素的同級元素。
程式碼編寫：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>相鄰選擇器</title>
<style type="text/css">
#lv + div {color:red;}
</style>
</head>
<body>
<div>綠葉學習網</div>
<div id="lv">
<p>綠葉學習網</p>
</div>
<div>綠葉學習網</div>
<div>綠葉學習網</div>
</body>
</html>瀏覽器執行效果：
6、群組選擇器：同時對幾個選擇器進行相同的操作，兩個選擇器之間必須用“，”（英文逗號）隔開，不然群組選擇器無法生效。
程式碼編寫：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>群組選擇器</title>
<style type="text/css">
h3,div,p,span{color:red;}
</style>
</head>
<body>
<h3>綠葉學習網</h3>
<div>綠葉學習網</div>
<p>綠葉學習網</p>
<span>綠葉學習網</span>
</body>
</html>瀏覽器執行效果：
總結：這些選擇器的使用頻率，佔所有選擇器的80%以上，對於初學者來說已經足夠使用了。