CSS有一套用于描述其語言的術語。在前面的教程中，你應該已經寫過這個樣式：
strong { color: red;}在CSS的術語中，上面這段代碼被稱為一條規則（rule）。這條規則以選擇器strong開始，它選擇要在DOM中哪些元素上使用這條規則。
更多細節
花括號中的部分稱為聲明（declaration）
關鍵字color是一個屬性, red 是其對應的值.
同一個聲明中的 屬性和值組成一個名值對（PRoperty-value pairs），名值對用分號分隔.
這個教程中將類似strong的選擇器稱為標簽選擇器（tag selector）.CSS規范中稱之為類型選擇器（type selector）.
本節將介紹更多的選擇器。
除了標簽名稱，你還可以在選擇器中使用屬性值。這樣你就可以更具體的描述你的規則.
其中 class和 id 兩個屬性具有比較重要的地位。
通過設置元素的 class 屬性，可以為元素指定類名。類名由開發者自己指定。 文檔中的多個元素可以擁有同一個類名。
在寫樣式表時，類選擇器是以英文句號（.）開頭的。
通過設置元素的 id 屬性為該元素制定ID。ID名由開發者指定。每個ID在文檔中必須是唯一的。
在寫樣式表時，ID選擇器是以#開頭的。
例：
下面的p標簽同時具有 class屬性和id屬性:
principal必須在文檔中是唯一的；但文檔中的其他標簽可以有和p相同的 class 屬性值 key. 在一個CSS樣式表中, 下面的規則將使所有class屬性等于key的元素文字顏色呈現綠色。（這些元素不一定都是 “ 元素。）
.key { color: green;}下面的規則將使 id 等于 principal 的那個元素的文字變為粗體:
如果多于一個規則指定了相同的屬性值都應用到一個元素上，CSS規定擁有更高確定度的選擇器優先級更高。ID選擇器比類選擇器更具確定度, 而類選擇器比標簽選擇器（tag selector）更具確定度。
更多細節 你也可以將多個選擇器組合起來構成更確定的選擇器。 比如，選擇器.key 選中所有class屬性為 key的元素. 選擇器 p.key 選中所有class屬性為key的
元素。 除了class 和 id，你還可以用方括號的形式指定其他屬性。比如，選擇器 [type=’button’] 選中所有 type 屬性為 button 的元素。
如果樣式中包含沖突的規則，且它們具有相同的確定度。那么，后出現的規則優先級高。
如果你遇到規則沖突，你可以增加其中一條的確定度或將之移到后面以使它具有更高優先級。
CSS偽類（pseudo-class）是加在選擇器后面的用來指定元素狀態的關鍵字。比如，:hover 會在鼠標懸停在選中元素上時應用相應的樣式。
偽類和偽元素（pseudo-elements）不僅可以讓你為符合某種文檔樹結構的元素指定樣式，還可以為符合某些外部條件的元素指定樣式：瀏覽歷史(比如是否訪問過 (:visited)， 內容狀態(如 :checked ), 鼠標位置 (如:hover). 完整列表參見 CSS3 Selectors working spec.
語法
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:disabledCSS還有多種基于元素關系的選擇器。通過它們你可以更精確的選擇元素。
| 選擇器 | 選擇的元素 |
|---|---|
A E | 元素A的任一后代元素E (后代節點指A的子節點，子節點的子節點，以此類推) |
A > E | 元素A的任一子元素E(也就是直系后代) |
E:first-child | 任一是其父母結點的第一個子節點的元素E |
B + E | 元素B的任一下一個兄弟元素E |
B ~ E | B元素后面的擁有共同父元素的兄弟元素E |
你可以任意組合以表達更復雜的關系。
你還可以使用星號（*）來表示”任意元素“。
例
一個HTML表格有id 屬性，但是它的行和單元格沒有單獨的id:
下面的規則使表格每行的第一個單元格字體為粗體，使第二個單元格使用等寬字體。這條規則只影響id為data-table-1的表格:
#data-table-1 td:first-child {font-weight: bolder;} #data-table-1 td:first-child + td {font-family: monospace;}最終效果:
| Prefix | 0001 | default |
|---|---|---|
更多細節
一般情況下，如果你提高了某個選擇器的的確定度，你便提高它的優先級。
使用這個技巧，可以避免為大量標簽指定 class 或 id 屬性。CSS（引擎）會幫你做的。
在復雜設計中速度非常重要，避免使用復雜的依賴元素關系的規則可以使你的樣式更有效率。
更多關于表格的例子，見 Tables。
創建一個HTML文件
將下面內容拷貝到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>創建style1.css:
strong { color: red; }.carrot { color: orange; }.spinach { color: green; }#first { font-style: italic; }保存文件，在瀏覽器中查看效果:
| **C**ascading **S**tyle **S**heets |
|---|
| **C**ascading **S**tyle **S**heets |
重新組織樣式中規則的順序，你會發現改變這幾條規則的順序不會影響最終效果。
類選擇器 .carrot 和.spinach 比標簽選擇器 strong 擁有更高優先級。
ID 選擇器 #first 比類選擇器和標簽選擇器更優先。
## 實例: 使用偽類選擇器
創建如下 HTML:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p>Go to our <a class="homepage" title="Home page">Home page</a>.</p> </body> </html>
編輯CSS:
“` a.homepage:link, a.homepage:visited { padding: 1px 10px 1px 10px; color: #fff; background: #555; border-radius: 3px; border: 1px outset rgba(50,50,50,.5); font-family: georgia, serif; font-size: 14px; font-style: italic; text-decoration: none; }
a.homepage:hover, a.homepage:focus, a.homepage:active { background-color: #666; } “`
保存文件用瀏覽器查看HTML文件 (將鼠標放到鏈接上查看效果):
Go to our Home page
通過使用基于關系的選擇器和偽類選擇器，你可以構造出復雜的疊加算法。這是一個常用的技巧，比如可以用來創建純CSS無javaScript的下拉菜單（pure-CSS dropdown menus）。關鍵點就是創建下面這類規則：
div.menu-bar ul ul { display: none;}div.menu-bar li:hover > ul { display: block;}然后將這些規則應用到下面的HTML結構中：
<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>新聞熱點
疑難解答
