目錄：
- CSS派生選擇器
- CSS元素選擇器
- CSS Id 和 Class選擇器
- CSS 屬性選擇器
CSS 派生選擇器
通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式背苦，你可以使標(biāo)記更加簡潔。
<em>在 CSS1 中吱抚，通過這種方式來應(yīng)用規(guī)則的選擇器被稱為上下文選擇器 (contextual selectors)花枫，這是由于它們依賴于上下文關(guān)系來應(yīng)用或者避免某項(xiàng)規(guī)則粱玲。在 CSS2 中躬翁，它們稱為派生選擇器，但是無論你如何稱呼它們查乒，它們的作用都是相同的弥喉。</em>
派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個(gè)標(biāo)簽的樣式。通過合理地使用派生選擇器玛迄，我們可以使 HTML 代碼變得更加整潔由境。
比方說，你希望列表中的 strong 元素變?yōu)樾斌w字蓖议，而不是通常的粗體字虏杰，可以這樣定義一個(gè)派生選擇器：
li strong {
font-style: italic;
font-weight: normal;
}
請注意標(biāo)記為<strong>的藍(lán)色代碼的上下文關(guān)系：
<p><strong>我是粗體字，不是斜體字勒虾，因?yàn)槲也辉诹斜懋?dāng)中纺阔，所以這個(gè)規(guī)則對我不起作用 </strong></p>
<ol>
<li><strong> 我是斜體字。這是因?yàn)?strong 元素位于 li 元素內(nèi)从撼。 </strong></li>
<li>我是正常的字體州弟。</li>
</ol>
在上面的例子中钧栖，只有 li 元素中的 strong 元素的樣式為斜體字低零，無需為 strong 元素定義特別的 class
或 id，代碼更加簡潔拯杠。
再看看下面的 CSS 規(guī)則：
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> blue </strong> . </h2>
相關(guān)內(nèi)容
CSS 后代選擇器
CSS 子元素選擇器
CSS 相鄰兄弟選擇器
CSS元素選擇器
元素選擇器掏婶，就是“選中”相同的元素，然后對相同的元素設(shè)置同一個(gè)CSS樣式潭陪。
語法：
CSS Id 和 Class選擇器
兩者的區(qū)別：傳送門
* HTML元素以id屬性來設(shè)置id選擇器,CSS 中 id 選擇器以 "#" 來定義雄妥。
* class 選擇器在HTML中以class屬性表示, 在 CSS 中最蕾，類選擇器以一個(gè)點(diǎn)"."號顯示：
* 類名的第一個(gè)字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用老厌。
class 和 id 有什么區(qū)別
1瘟则、class是設(shè)置標(biāo)簽的類， class屬性用于指定元素屬于何種樣式的類枝秤；
2醋拧、id是設(shè)置標(biāo)簽的標(biāo)識。id屬性用于定義一個(gè)元素的獨(dú)特的樣式淀弹。
3丹壕、class是一個(gè)樣式，先定義好薇溃， 然后可以套給多個(gè)結(jié)構(gòu)/內(nèi)容, 便于復(fù)用菌赖。也就是說class名稱可以相同。
4沐序、id是一個(gè)標(biāo)簽琉用，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，就象你的名字薄啥， 如果一個(gè)屋子有2個(gè)人同名辕羽，就會出現(xiàn)混淆；id是先找到結(jié)構(gòu)/內(nèi)容垄惧，再給它定義樣式刁愿；
5、id的優(yōu)先級要高于class-
那么什么時(shí)候用 class 什么時(shí)候用 id呢
- 單一的元素到逊，或需要程序铣口、JS控制的東西，需要用id定義觉壶；重復(fù)使用的元素脑题、類別，用class定義铜靶。
- 如果在頁面中要對某個(gè)對象進(jìn)行腳本操作（js）叔遂，那么可以給他定義一個(gè)id，否則只能利用遍歷頁面元素加上指定特定屬性來找到它争剿，這是相對浪費(fèi)時(shí)間資源已艰，遠(yuǎn)遠(yuǎn)不如一個(gè)id來得簡單.
CSS 屬性選擇器
對帶有指定屬性的 HTML 元素設(shè)置樣式〔衔可以為擁有指定屬性的 HTML 元素設(shè)置樣式哩掺，而不僅限于 class 和 id 屬性。
<em><small>注釋：只有在規(guī)定了 !DOCTYPE 時(shí)涩笤，IE7 和 IE8 才支持屬性選擇器嚼吞。在 IE6 及更低的版本中盒件，不支持屬性選擇。</small></em>
屬性選擇器
下面的例子為帶有 title 屬性的所有元素設(shè)置樣式：
[title]
{
color:red;
}
屬性和值選擇器
下面的例子為 title="robot" 的所有元素設(shè)置樣式：
[title=robot]
{
border:5px solid blue;
}
屬性和值選擇器 - 多個(gè)值
下面的例子為包含指定值的 title 屬性的所有元素設(shè)置樣式舱禽。適用于由空格分隔的屬性值：
[title~=hello] { color:red; }
下面的例子為帶有包含指定值的 lang 屬性的所有元素設(shè)置樣式炒刁。適用于由連字符分隔的屬性值：
[lang|=en] { color:red; }
設(shè)置表單的樣式
屬性選擇器在為不帶有 class 或 id 的表單設(shè)置樣式時(shí)特別有用：
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;
}
