選擇器
- 標籤選擇器
- id選擇器
- class選擇器
標籤選擇器
選擇器優先級：id>class>標籤
/*標籤選擇器*/
h1{
color:#000000;
font-size:50px;
}
p{
text-align: center;
color: salmon;
}
body{
margin: 0;
padding: 0;
}
id選擇器
/*ID選擇器*/
#myP{
color: brown;
}
class選擇器
/*Class選擇器*/
.myClass{
font-size: 20px;
}
全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My World</title>
<style>
/*選擇器優先級id>class>標籤*/
/*標籤選擇器*/
h1{
color:#000000;
font-size:50px;
}
p{
text-align: center;
color: salmon;
}
body{
margin: 0;
padding: 0;
}
/*ID選擇器*/
#myP{
color: brown;
}
/*Class選擇器*/
.myClass{
font-size: 20px;
}
</style>
</head>
<body>
<img src="img/u=192422651,1443365817&fm=26&gp=0.jpg" width="10%" alt="你這是啥網" />
<h1 class="myClass">歡迎來到德萊聯盟</h1>
<p class="myClass">
豹女，獅子狗
提莫，凱爾
德萊厄斯，德萊文
蓋倫，艾希
</p>
<p id="myP">
豹女，獅子狗
提莫，凱爾
德萊厄斯，德萊文
蓋倫，艾希
</p>
</body>
</html>
效果：
