[TOC] >[info]當我們定義一條樣式規則時候，這條樣式規則會作用于網頁當中的某 些元素，選擇器是一種模式，用于選擇需要添加樣式的元素。下面列表常用的選擇器。 ## id選擇器 >[danger]唯一的，一個頁面只出現一次，一般用于JS的獲取元素，以 "#" 來定義 下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色： ~~~ <style type="text/css"> #red {color:red;} #green {color:green;} p#red{ color:blue; } </style> ~~~ 下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。 ~~~ <p id="red">這個段落是紅色。</p> <p id="green">這個段落是綠色。</p> ~~~ ## 類選擇器 >[danger]作用于一類標簽的，需要的加上這個類名就可以,類選擇器以一個點號顯示： ~~~ <style type="text/css"> .center {text-align: center} h1.center{font-size:14px;} </style> ~~~ 在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。 在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規則。 ~~~ <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p> ~~~ ## 標簽選擇器 >[danger]作用于同一個標簽,以標簽名為選擇器： ~~~ <style type="text/css"> p {text-align: center} </style> ~~~ 下面的 HTML 代碼中，標簽為p都會被作用到 ~~~ <p>我是P標簽包含的</p> <h1>我是H1標簽包含的</h1> <p>我是P標簽包含的</p> ~~~ ## 群組選擇器 >[danger]同時匹配所有p元素或td元素，li元素,之間用逗號分隔 ~~~ <style type="text/css"> p, td, li { line-height:20px; color:#c00; } </style> ~~~ ## 后代選擇器 >[danger]后代元素選擇器，匹配所有屬于#nav元素后代的li元素 ~~~ <style type="text/css"> #nav li { display:inline; } </style> ~~~ ## 通用選擇器 >[danger]通用選擇器用*來表示，作用于所有元素，一般在項目初始化時使用 ~~~ <style type="text/css"> * { font-family: "微軟雅黑"; } </style> ~~~ ## 偽類選擇器 >[danger]同一個元素在不同狀態下的不同樣式 下面例子：選擇鼠標指針浮動在其上的元素，并設置其樣式： ~~~ <style type="text/css"> a:hover{ background-color:yellow; } </style> ~~~ [更多偽類選擇器](http://www.w3school.com.cn/cssref/css_selectors.asp) ## CSS命名規范 * 對于頁面中具有唯一性、結構性的模塊，使用id選擇器，其他 一般采用class選擇器 * 選擇器命名一律使用小寫字母 * 要有合理的注釋 * 結構上有父子包含關系的樣式，應通過命名體現。 * 命名使用駝峰結構+橫線，即同一對象的命名如果需要多個單 詞，使用駝峰命名法則，如：boxMusic * 名字不能以數字開頭 * 命名的時候一定要有意義 >[danger]**作業：**把所有常用的選擇器都練習下。