CSS有一套用于描述其語言的術(shù)語瓷产。
strong {
color:red;
}
在CSS的術(shù)語中搜贤，上面這段代碼被稱為一條規(guī)則（rule）版仔。這條規(guī)則以選擇器strong開始，它選擇要在DOM中哪些元素上使用這條規(guī)則吨瞎。
Tip:
花括號中的部分稱為**聲明（declaration）**
關(guān)鍵字color是一個屬性, red是其對應(yīng)的值.
同一個聲明中的 屬性和值組成一個名值對（property-value pairs）征堪，名值對用分號分隔.
這個教程中將類似strong的選擇器稱為標簽選擇器（tag selector）
.CSS規(guī)范中稱之為類型選擇器（*type* selector）.
除了標簽名稱，你還可以在選擇器中使用屬性值关拒。這樣你就可以更具體的
描述你的規(guī)則.
其中class和id兩個屬性具有比較重要的地位。
類型選擇器(Class selectors)#####
通過設(shè)置class屬性，可以為元素指定類名着绊。類名由開發(fā)者自己指定谐算。 文檔中的多個元素可以擁有同一個類名。
在寫樣式表時归露，類選擇器是以英文句號（.）開頭的洲脂。
ID選擇器(ID selectors)#####
通過設(shè)置元素的id屬性為該元素制定ID。ID名由開發(fā)者指定剧包。每個ID在文檔中必須是唯一的恐锦。
在寫樣式表時，ID選擇器是以#開頭的疆液。
如果多于一個規(guī)則指定了相同的屬性值都應(yīng)用到一個元素上一铅，CSS規(guī)定擁有更高確定度的選擇器優(yōu)先級更高。ID選擇器比類選擇器更具確定度, 而類選擇器比標簽選擇器（tag selector）更具確定度堕油。
Tips:
你也可以將多個選擇器組合起來構(gòu)成更確定的選擇器潘飘。
比如，選擇器.key 選中所有class屬性為 key的元素. 選擇器 p.key 選中所有class屬性為key的元素<p>元素掉缺。
除了class和 id,你還可以用方括號的形式指定其他屬性卜录。比如，選擇器 [type='button'] 選中所有 type 屬性為 button 的元素眶明。
如果樣式中包含沖突的規(guī)則艰毒，且它們具有相同的確定度。那么搜囱，后出現(xiàn)的規(guī)則優(yōu)先級高
偽類選擇器(Pseudo-class)#####
CSS偽類(pseudo-class) 不僅可以讓你為符合某種文檔樹結(jié)構(gòu)的元素指定樣式丑瞧，還可以為符合某些外部條件的元素指定樣式：瀏覽歷史(比如是否訪問過(:visited)，內(nèi)容狀態(tài)(如:checked) , 鼠標位置 (如:hover).
語法：
selector:pseudo-class {
property: value;
}
偽類列表
- :link
- :visited
- :active
- :hover
- :focus
- :first-child
- :nth-child
- :nth-last-child
- :nth-of-type
- :first-of-type
- :last-of-type
- :empty
- :target
- :checked
- :enabled
- :disabled
基于關(guān)系的選擇器#####
CSS還有多種機遇關(guān)系的選擇器犬辰。通過它們你可以更精確的選擇元素嗦篱。
常見的基于關(guān)系的選擇器#####
:限定修飾符
| 選擇器 | 選擇的元素 |
|---|---|
| A E | 元素A的任一后代元素E(后代節(jié)點指A的子節(jié)點，子節(jié)點的子節(jié)點幌缝，以此類推) |
| A>E | 元素A的任一子元素E(直系后代) |
| E:first-child | 任一是其父母結(jié)點的第一個子節(jié)點的元素E |
| B + E | 元素B的任一下一個兄弟元素E |
| B ~ E | B元素后面的擁有共同父元素的兄弟元素E |
你可以任意組合以表達更復雜的關(guān)系灸促。
你還可以使用星號（*）來表示”任意元素“。
使用類型選擇器和ID選擇器#####
- 創(chuàng)建一個HTML文件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p id="first">
<strong class="carrot">C</strong>ascading
<strong class="spinach">S</strong>tyle
<strong class="spinach">S</strong>heets
</p>
<p id="second">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
- 創(chuàng)建style.css
strong { color: red; }
.carrot { color: orange; }
.spinach { color: green; }
#first { font-style: italic; }
在瀏覽器中的效果：
重新組織樣式中規(guī)則的順序涵卵，你會發(fā)現(xiàn)改變這幾條規(guī)則的順序不會影響最終效果浴栽。
類選擇器 .carrot和.spinach比標簽選擇器 strong 擁有更高優(yōu)先級。
ID 選擇器 #first比類選擇器和標簽選擇器更優(yōu)先轿偎。
使用基于關(guān)系的選擇器和偽類選擇器#####
通過使用基于關(guān)系的選擇器和偽類選擇器典鸡，你可以構(gòu)造出復雜的疊加算法。這是一個常用的技巧坏晦，比如可以用來創(chuàng)建純CSS無JavaScript的下拉菜單（pure-CSS dropdown menus）萝玷。關(guān)鍵點就是創(chuàng)建下面這類規(guī)則：
div.menu-bar ul ul {
display: none;
}
div.menu-bar li:hover > ul {
display: block;
}
然后將這些規(guī)則應(yīng)用到下面的HTML結(jié)構(gòu)中：
<div class="menu-bar">
<ul>
<li> <a href="example.html">Menu</a>
<ul>
<li> <a href="example.html">Link</a> </li>
<li> <a class="menu-nav" href="example.html">Submenu</a>
<ul>
<li> <a class="menu-nav" href="example.html">Submenu</a>
<ul>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
</ul>
</li>
<li><a href="example.html">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
在瀏覽器中的效果：
