選擇器<style>
為了讓.html代碼更加簡潔，這里引入選擇器style
本文總共介紹選擇器的四種使用方式
一、選擇器的四種形式
1.ID選擇器
id表示身份，在頁面元素中的id不允許重復，因此id選擇器只能選擇單個元素
2.類別選擇器
選擇擁有該類別的多個元素
3.標簽選擇器
根據標簽名稱，選擇對應的所有標簽
4.通用選擇器
針對頁面中的所以標簽都生效
二、選擇器的使用
這是一段沒有使用選擇器的html代碼：
<!--這是一段未使用選擇器的代碼-->
<!DOCTYPE html>
<html style="background-color: gainsboro">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 0;">
<div id="banner">
<img src="img1/img2.png" style="width: 100%;" >
</div>
<div id="navigation" style="height: 80px;text-align: center;line-height: 80px;background-color: white;">
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">關於我們</a>
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">我們的故事</a>
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">產品和解決方案</a>
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">新聞和活動</a>
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">聯系我們</a>
</div>
<div id="botton" style="height: 40px;text-align: center;line-height: 40px;color: grey;">
運用先進技術積極推動改變，讓整個世界更美好。
</div>
</body>
</html>
使用選擇器后：
<!--添加完選擇器后的代碼-->
<!DOCTYPE html>
<html style="background-color: gainsboro">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#navigation{
height: 80px;text-align: center;line-height: 80px;background-color: white;
}
#botton{
height: 40px;text-align: center;line-height: 40px;color: grey;
}
.nav{
text-decoration: none; color: black; margin: 0 15px;
}
#banner img{
width: 100%;
}
</style>
</head>
<body style="margin: 0;">
<div id="banner">
<img src="img1/img2.png">
</div>
<div id="navigation">
<a href="#" class="nav" >關於我們</a>
<a href="#" class="nav">我們的故事</a>
<a href="#" class="nav">產品和解決方案</a>
<a href="#" class="nav">新聞和活動</a>
<a href="#" class="nav">聯系我們</a>
</div>
<div id="botton">
運用先進技術積極推動改變，讓整個世界更美好。
</div>
</body>
</html>
1. ID選擇器：
（先在head中添加<style><style\>標簽）
以這段代碼為例：
<div id="navigation" style="height: 80px;text-align: center;line-height: 80px;background-color: white;">
(1)為標簽添加id屬性，如：
<div id="navigation"><\div>
(2)將為標簽屬性style中的內容提取出來，移到head標簽的style中，格式： #id{} 括號中存放css樣式
<style>
#navigation{
height: 80px;text-align: center;line-height: 80px;background-color: white;
}
<\style>
一個簡單的id選擇器就完成了，為id為navigation的標簽添加括號中的樣式。
2.類別選擇器
與id選擇器類似
（1）為標簽添加class屬性
<a href="#" class="nav" >關於我們</a>
（2）head中的格式：.class名{}
.nav{
text-decoration: none; color: black; margin: 0 15px;
}
為所有class類名為nav的標簽添加此屬性
3.標簽選擇器
這個是最簡單的,標簽名加大括號
直接上例子：（為所有<a>標簽添加屬性）
a{
text-decoration: none; color: black; margin: 0 15px;
}
這里還有個特殊的使用方法
例如這段代碼：
<div id="banner">
<img src="img1/img2.png">
</div>
為id為banner的div標簽中的所有img標簽添加屬性：
#banner img{
width: 100%;
}
嗯。。。# id 標簽名{}
4.通用選擇器
*{}
※
這里涉及到一個選擇器的權重問題，后面會專門介紹權重的計算問題，這里先簡單的說一下。
選擇器范圍越小，優先級越高
行內樣式>id選擇器>類選擇器>標簽選擇器>通用選擇器
關於選擇器權重問題，參考這篇文章：https://www.cnblogs.com/orangekk/p/14239135.html