三種基本選擇器
阿新 • • 發佈：2022-03-29
三種基本選擇器
標籤選擇器
同類型標籤設定：例如設定h1標籤，則所有的h1標籤都會被設定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標籤選擇器學習</title> <style> h1 { color: #429393; background: #4949b3; } </style> </head> <body> <h1>第一個一級標籤</h1> <h1>第二個一級標籤</h1> <h1>第三個一級標籤</h1> </body> </html>
類選擇器
按照class類別設定，可設定多個標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>類選擇器學習</title> <style> .class1 { color: yellow; } .class2 { color: #4949b3; } </style> </head> <body> <h1 class="class1">第一個一級標籤</h1> <h1 class="class1">第二個一級標籤</h1> <h1 class="class2">第三個一級標籤</h1> </body> </html>
id選擇器
僅能設定唯一的標籤，因為id唯一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id選擇器學習</title> <style> #id1 { color: #429393; background: #4949b3; } #id2 { color: #6b9342; background: #4949b3; } #id3 { color: #9e402f; background: #4949b3; } </style> </head> <body> <h1 id="id1">第一個一級標籤</h1> <h1 id="id2">第二個一級標籤</h1> <h1 id="id3">第三個一級標籤</h1> </body> </html>
三種選擇器的優先順序
id選擇器>類選擇器>標籤選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三種基本標籤選擇器優先順序</title>
<style>
#id1 {
color: blue;
}
h1 {
color: yellow;
}
.class1 {
color: red;
}
</style>
</head>
<body>
<h1 id="id1" class="class1">第一個一級標籤</h1>
<h1 class="class1">第二個一級標籤</h1>
<h1>第三個一級標籤</h1>
</body>
</html>