目錄
一、DOM
二、類選擇器
類選擇器示例代碼
類選擇器Class Selector
*指定多個class
多個class選擇器，後定義的優先級高
三、标簽類型選擇器
标簽類型示例代碼：
統一設定某種标簽的樣式
标簽與類結合使用
四、ID選擇器
元素的ID
ID選擇器
ID選擇器示例代碼：
五、僞類選擇器
僞類選擇器示例代碼：
六、子選擇器
子選擇器示例代碼：
一、DOM
DOM, Document Object Model
文檔對象模型
在HTML頁面裡，浏覽器根據<body>和裡面的所有标簽，建立一個樹狀結構
<body>下的每個節點，稱為元素Element
例如：
元素的通用屬性：
元素都有一些屬性，例如
| id | 給改元素設定一個全局唯一的ID |
| name | 給改元素設定一個名字 |
| class | 設定樣式類名 |
| style | 設定臨時樣式 |
| ...... | ....................... |
<img id="logo" src="img/U7015P1134DT20121120162824.jpg" />
注：不要把顯示的内容放在<body>以外
二、類選擇器
類選擇器示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>資訊統計</title>
<style>
/*普通按鈕*/
.my-button{
padding: 8px;
border: 1px solid silver;
font-size: 12px;
color: black;
background-color: #f1f1f1;
min-width: 60px;
}
/*預設按鈕*/
.my-button-default{
background-color: #0078D7;
color: #f1f1f1;
border-color: #F1F1F1;
}
</style>
</head>
<body>
<p>
<button class="my-button">建立</button>
<button class="my-button">删除</button>
<button class="my-button">添加圖檔</button>
<button class="my-button">添加連結</button>
</p>
<p>
<textarea style="width:400px;height: 200px"></textarea>
</p>
<p>
<button class="my-button ">放棄編輯</button>
<button class="my-button my-button-default">釋出</button>
</p>
</body>
</html>
類選擇器Class Selector
示例：
.my-button
{
}
用于指定 所有class="my-button"的元素的樣式。
*指定多個class
一個元素可以指定多個class
<button class="my-button my-button-default">釋出</button>
規則：
-定義多個樣式
-指定樣式時，以空格分開
*優先級問題
當多個樣式出現沖突時：
例如：
.my-button{}
.my-button-default{}
其中，.my-button-default{}的優先級更高，因為他是後出現的，
驗證：打開谷歌開發者工具來驗證：
1.2.3.4四部即可看出
多個class選擇器，後定義的優先級高
三、标簽類型選擇器
标簽類型示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>資訊統計</title>
<style>
/*基礎按鈕樣式*/
button{
padding: 8px;
border: 1px solid silver;
border-radius: 6px;
font-size: 12px;
color: black;
background-color: #f1f1f1;
min-width: 60px;
}
/*預設按鈕*/
button.my-default{
background-color: #0078D7;
color: #f1f1f1;
border-color: #F1F1F1;
}
</style>
</head>
<body>
<p>
<button>建立</button>
<button>删除</button>
<button>添加圖檔</button>
<button>添加連結</button>
</p>
<p>
<textarea style="width:400px;height: 200px"></textarea>
</p>
<p>
<button>放棄編輯</button>
<button class="my-default">釋出</button>
</p>
</body>
</html>
統一設定某種标簽的樣式
例如：
button{
}
标簽與類結合使用
button.my-default{
}
标簽類型為<button>、并且class="my-default"的元素
四、ID選擇器
元素的ID
每個元素都可以設計一個id屬性
例如：
<button id="ok">釋出</button>
由于ID應該是在頁面内唯一的，為了避免重複，一般應該命名較長一些
例如：editor-ok-button editor-cancel-button
ID選擇器
ID Selector，ID選擇器
指定某個元素的ID的元素的樣式
注：
1、ID應該是在頁面内唯一的，即通過一個id可以唯一定位一個元素
2、ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 浏覽器中不起作用。
優先級
在Chrome裡觀察Type Selector和ID Selector的優先級順序....ID Selector
優先級順序：
| 内聯樣式 | 1000 | <button style='width:400px;height:200px'></button> |
| ID選擇器 | 100 | <button id="ok">釋出</button> |
| 類選擇器 | 10 | <button class="my-button">釋出</button> |
| 标簽類型 | 1 | ...... |
ID選擇器示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加資訊</title>
<style>
/*基礎按鈕樣式*/
button{
padding: 8px;
border: 1px solid silver;
border-radius: 6px;
font-size: 12px;
color: #222;
background-color: #F1F1F1;
min-width: 60px;
}
/*CSS 中 id 選擇器以 "#" 來定義。*/
#ok
{
background-color: #0078D7;
color: #F1F1F1;
border-color: #F1F1F1;
}
#cancel
{
background-color: #FF4300;
color: #F1F1F1;
border-color: #F1F1F1;
}
</style>
</head>
<body>
<!--一般用div進行布局-->
<p>
<button>建立</button>
<button>删除</button>
<button>添加圖檔</button>
<button>添加連結</button>
</p>
<p>
<textarea style="width: 400px;height: 200px"></textarea>
</p>
<p>
<button id="cancel">放棄編輯</button>
<button id="ok">釋出</button>
</p>
</body>
</html>
五、僞類選擇器
僞類選擇器Pseudo-Class-Selector
即：為元素的每一種狀态定義一個樣式
| xxx | 普通狀态顯示 |
| xxx:hover | 滑鼠移上去的狀态顯示 |
| xxx:active | 滑鼠按下去的狀态顯示 |
| xxx:focus | 焦點狀态下的狀态顯示 |
其中，xxx可以是ID/class/Type Selector
例如：
.my-button：focus{}
img：disabled{}
#ok:hover{}
僞類選擇器示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 基礎按鈕樣式 */
button{
padding: 8px;
border: 1px solid silver;
border-radius: 6px;
font-size: 12px;
color: #222;
background-color: #f1f1f1;
min-width: 60px;
outline: none; /* 去掉輪廓 */
}
/*滑鼠移過去顯示*/
button:hover /*懸停*/
{
border-color: #0078D7;
background-color: #fff;
}
/*滑鼠按下到擡起之間的顯示*/
button:active /*點選*/
{
border-color: #0078D7;
background-color: #0078D7;
color: #fff;
}
/*元素處理焦點時的顯示*/
button:focus
{
border-color:red;
background-color: #0078D7;
color: #fff;
}
</style>
</head>
<body>
<p>
<button> 建立 </button>
<button> 删除 </button>
<button> 添加圖檔 </button>
<button> 添加連結 </button>
</p>
<p>
<input type='checkbox'/> 立即重新開機伺服器
</p>
</body>
</html>
六、子選擇器
子選擇器 Descendant Selector
可以設定父元素下子元素的樣式
子選擇器示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#login-panel label
{
color: #444;
padding: 6px;
min-width: 80px;
display: inline-block;
text-align: right;
}
#login-panel input
{
color: blue;
padding: 6px;
}
#login-panel .row
{
padding: 6px;
}
#login-panel button
{
width: 100px;
padding: 6px;
margin-left: 250px;
}
</style>
</head>
<body>
<div id="login-panel">
<div class="row">
<label>使用者名</label>
<input type="text" /><br />
</div>
<div class="row">
<label>密碼</label>
<input type="password" />
</div>
<div class="row">
<button>登入</button>
</div>
</div>
</body>
</html>
#login-panel label{}
在 id="login-panel"元素下所有<label>的樣式
.xxx.yyy.zzz{}
在class="xxx"下的子元素class="yyy"下的class="zzz"