CSS 選擇器及各樣式引用方式
Css ：層疊樣式表 (Cascading Style Sheets),定義瞭如何顯示HTML元素。
1.選擇器的分類
語法結構：
1.1 Id選擇器
1.1.1 格式
#id ：#+元素的id；id是區分大小寫。
1.1.2 示例
#title1 {background-color:Blue;border-width:thick;}
1.2 Class 類選擇器
1.2.1 格式
.ClassName ：.+Class類的名稱；類名是區分大小寫。
1.2.2 示例
.postTitle {background-color: Green;}
1.3 元素(標籤)名稱選擇器
1.3.1 格式
元素名稱：元素的名稱不區分大小寫。
1.3.2 示例
h2 {background-color:Green;}
1.4 複合選擇器
1.4.1 格式
元素名稱1,元素名稱2,#id,.ClassName ：可以根據元素的名稱、id、類名，使符合條件的元素共同擁有樣式;各選擇器條件要以分號(,)隔開。
1.4.2 示例
h2 , #subid , .subclass {background-color:Green;}
1.5 層次選擇器
1.5.1 格式
父選擇器 子選擇器 ：滿足父選擇器下的子選擇器條件；兩者中間用空格隔開。
1.5.2 示例
① 父選擇器為元素
div input{background-color:Green} /* 表示div下的input子元素 */
② 父選擇器可以為類、Id選擇器，子選擇器也可以。
.showInfo_tabel tr{height:20px;} /* 表示table的class為showInfo_tabel時，下面的tr元素height屬性為20px */
1.5.3 展示圖片
1.6 偽類選擇器
1.6.1 格式
其他選擇器 偽類選擇器
1.6.2 說明
行為選擇器是以 : 開頭，後面跟著偽類名稱。主要有5個(CSS1和2)：
①a:link 選擇所有未被訪問的連結
②a:visited
③a:active 選擇活動連結
④input:hover 滑鼠懸停上方的元素
⑤input:focus 獲取到焦點的元素
1.6.3 示例
1.若不想a連結在訪問後改變元素，可以把a標籤的未被訪問和已被訪問設為同一種顏色
a :link,:visited{color:Blue;}
2.元素的滑鼠懸停(進入)：如"登入"按鈕的變色。
.btn_login:hover {background-color: #218fd5;}
2. CSS樣式的存放方式
樣式可以存放在一個專門存放樣式的檔案裡(外部樣式表)、HTML頁面的<head></head>裡(內部樣式表)、元素的Style屬性裡(內聯樣式)。
2.1 外部樣式表
2.1.1 存放方式
存放在專門的一個樣式表裡。以css為字尾的檔案。
2.1.2 引用方式
在HTML頁面的<head></head>節點裡，新增<link />標籤：
<head> <link href="../Styles/Site.css" rel="stylesheet" type="text/css" /> </head>
2.1.3 應用場景
多個page頁面共享樣式，如：論壇帖子的排版。
2.2 內部樣表
2.2.1 存放方式
在HTML頁面的<head></head>節點裡，新增<style type="text/css" ></style> 指令碼。
<head> <title>page標題</title> <style type="text/css"> input{background-color:Green } </style> </head>
2.2.2 使用場景
單個page特有的樣式。
2.3 內聯樣式
2.3.1 存放方式
元素的Style屬性裡。
<input type="text" style="background-color:Blue;" value="input1"/>
2.3.2 使用場景
特殊場合的特殊元素。
3. 樣式的優先順序
當一個元素附加許多級樣式時，比如：外聯樣式包含此元素、內聯樣式也包含此元素等，樣式採用的是並集方式。
若有交集的元素，將按以下的情況決定採用哪個樣式屬性：
3.1 非同級引用
外部樣式表、內部樣式表、內聯樣式都設定了此元素的某個相同樣式屬性。
3.1.1 優先順序對比
內聯樣式 > 內部樣式表 > 外部樣式表
對相同的樣式屬性，其值是獲取優先順序最高的。
3.1.2 示例
<head> <style> #testinput{width:300px} </style> </head> <body > <input type="text" id="testinput" style="background-color:Blue;width:120px;" value="input1"/> </body>
input標籤的width屬性，實際為120px;
3.2 同級引用
在外部樣式表 或 內部樣式表裡 多個樣式選擇器包含了此元素。
3.2.1 優先順序對比
外部樣式表、內部樣式表 情況下：Id選擇器 > class 類選擇器 >元素選擇器。
內聯樣式情況下：採用後面同屬性樣式的值。
3.2.2 示例
<head> <style> input{background-color:Yellow;} #testinput{background-color:Red;} .showblue{background-color:Blue;} </style> </head> <body > <input type="text" id="testinput" class="showblue" value="input1" style="width:1000px;width:100px"/> </body>
顯示圖片：
