css派生選擇器、id選擇器、類選擇器、屬性選擇器
1.派生選擇器
也叫上下文選擇器，可以根據上下文關係來定義樣式。無需為特別為元素設定id 或者class，使程式碼更簡單。
例如.希望列表中的，<strong>變成斜體。
li strong {
font-style: italic;
font-weight: normal;
}
施加影響的html.
<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p>
<ol>
<li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li>
<li>我是正常的字型。</li>
</ol>
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
施加影響的html:
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>
2.css id 選擇器
id 選擇器以＃來定義。每個id 屬性只能在每個 HTML 文件中出現一次。即一個id只能給一個標籤唯一使用，不能賦值給多個標籤。
id 選擇器經常與派生選擇器連用。
例.
#red {color:red;}
#green {color:green;}
施加影響的html:
<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>
例.#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
註釋：id是sidebar的標籤內的 段落 會被設定此樣式。也就是說p標籤只是其中一個。如果div有 sidebar這個id,那麼其中的p標籤會被設定成上述樣式。
3.類選擇器
類選擇器以 . 號定義。
class也可以作為派生選擇器。.fancy td
元素也可以基於它們的類二被選擇。td.fancytd.
.center {text-align: center}
施加影響的html:
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
例.
.fancy td {
color: #f60;
background: #666;
}
註釋：類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字.
例.
td.fancy {
color: #f60;
background: #666;
}
<td class="fancy"> 3.屬性選擇器 可以為擁有指定屬性的 HTML 元素設定樣式，而不僅限於 class 和 id 屬性。
只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支援屬性選擇器。在 IE6 及更低的版本中，不支援屬性選擇。
[title]
{
color:red;
}
4.屬性和值選擇器 [title=W3School]
{
border:5px solid blue;
}
例1.屬性和值選擇器：多個值。適用於由空格分隔的屬性值：[title~=hello] { color:red; } 選擇器 描述
[attribute] 用於選取帶有指定屬性的元素。
[attribute=value] 用於選取帶有指定屬性和值的元素。
[attribute~=value] 用於選取屬性值中包含指定詞彙的元素。
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value] 匹配屬性值以指定值開頭的每個元素。
[attribute$=value] 匹配屬性值以指定值結尾的每個元素。
[attribute*=value] 匹配屬性值中包含指定值的每個元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title~=hello]
{
color:red;
}
</style>
</head>
<body>
<h1>可以應用樣式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />
</body>
</html>
例2.適用於由連字元分隔的屬性值：[lang|=en] { color:red; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[lang|=en]
{
color:red;
}
</style>
</head>
<body>
<h1>可以應用樣式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
<h1>無法應用樣式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>
</html>
5.表單樣式（同樣也給屬性加方括號，只是前面加上表單的標籤） input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
5.建立css 當讀到一個樣式表時，瀏覽器會根據它來格式化html，插入樣式表的方法有：外部樣式表、內部樣式表、內聯樣式表。 (1)外部樣式表： 當樣式需要應用到很多頁面時，外部樣式表是理想的選擇。 每個頁面使用<link>標籤連結到樣式表。<link>標籤在<head>標籤裡。 外部樣式表可以在任何文字編輯器中進行編輯。檔案不能包含任何的 html 標籤。樣式表應該以 .css 副檔名進行儲存。 瀏覽器會從檔案 mystyle.css 中讀到樣式宣告，並根據它來格式文件。
不要在屬性值與單位之間留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head> (2)內部樣式表： 當單個文件需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標籤在文件頭部定義內部樣式表 <head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head> (3)內聯樣式： <p style="color: sienna; margin-left: 20px">
This is a paragraph
</p> (4)多重樣式： 如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。 例如：外部樣式表擁有針對 h3 選擇器的三個屬性： h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而內部樣式表擁有針對 h3 選擇器的兩個屬性：
h3 {
text-align: right;
font-size: 20pt;
}
假如擁有內部樣式表的這個頁面同時與外部樣式錶鏈接，那麼 h3 得到的樣式是：
color: red;
text-align: right;
font-size: 20pt;