資料: 選擇器（Selectors）
CSS有一套用于描述其語(yǔ)言的術(shù)語(yǔ)橙困。在前面的教程中瞧掺，你應(yīng)該已經(jīng)寫過(guò)這個(gè)樣式：
strong {
color: red;
}
在CSS的術(shù)語(yǔ)中，上面這段代碼被稱為一條規(guī)則（rule）凡傅。這條規(guī)則以選擇器strong開始辟狈，它選擇要在DOM中哪些元素上使用這條規(guī)則。
- 更多細(xì)節(jié)
花括號(hào)中的部分稱為聲明（declaration）
關(guān)鍵字color是一個(gè)屬性, red 是其對(duì)應(yīng)的值.
同一個(gè)聲明中的 屬性和值組成一個(gè)名值對(duì)（property-value pairs）夏跷，名值對(duì)用分號(hào)分隔.
這個(gè)教程中將類似strong的選擇器稱為標(biāo)簽選擇器（tag selector）.CSS規(guī)范中稱之為類型選擇器（type selector）.
類選擇器（Class selectors）
通過(guò)設(shè)置元素的 class 屬性哼转，可以為元素指定類名。類名由開發(fā)者自己指定槽华。 文檔中的多個(gè)元素可以擁有同一個(gè)類名壹蔓。
在寫樣式表時(shí)，類選擇器是以英文句號(hào)（.）開頭的猫态。
ID選擇器（ID selectors）
通過(guò)設(shè)置元素的 id 屬性為該元素制定ID佣蓉。ID名由開發(fā)者指定披摄。每個(gè)ID在文檔中必須是唯一的。
在寫樣式表時(shí)偏螺，ID選擇器是以#開頭的行疏。
例：
下面的p標(biāo)簽同時(shí)具有 class 屬性和id 屬性:
<p class="key" id="principal">
id 屬性值 principal必須在文檔中是唯一的；但文檔中的其他標(biāo)簽可以有和p相同的 class 屬性值 key.
在一個(gè)CSS樣式表中, 下面的規(guī)則將使所有class屬性等于key的元素文字顏色呈現(xiàn)綠色套像。（這些元素不一定都是 <p> 元素酿联。）
.key {
color: green;
}
下面的規(guī)則將使 id 等于 principal 的那個(gè)元素的文字變?yōu)榇煮w:
#principal {
font-weight: bolder;
}
如果多于一個(gè)規(guī)則指定了相同的屬性值都應(yīng)用到一個(gè)元素上，CSS規(guī)定擁有更高確定度的選擇器優(yōu)先級(jí)更高夺巩。ID選擇器比類選擇器更具確定度, 而類選擇器比標(biāo)簽選擇器（tag selector）更具確定度贞让。
- 更多細(xì)節(jié)
你也可以將多個(gè)選擇器組合起來(lái)構(gòu)成更確定的選擇器。
比如柳譬，選擇器.key 選中所有class屬性為 key的元素. 選擇器 p.key 選中所有class屬性為key的<p> 元素喳张。
除了class 和 id，你還可以用方括號(hào)的形式指定其他屬性美澳。比如销部，選擇器 [type='button'] 選中所有 type 屬性為 button 的元素。
如果樣式中包含沖突的規(guī)則制跟，且它們具有相同的確定度舅桩。那么，后出現(xiàn)的規(guī)則優(yōu)先級(jí)高雨膨。
如果你遇到規(guī)則沖突擂涛，你可以增加其中一條的確定度或?qū)⒅频胶竺嬉允顾哂懈邇?yōu)先級(jí)。
偽類列表
: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ò)它們你可以更精確的選擇元素撒妈。
常見的基于關(guān)系的選擇器
| 選擇器 | 選擇的元素 |
|---|---|
| AE | 元素A的任一后代元素E (后代節(jié)點(diǎn)指A的子節(jié)點(diǎn)，子節(jié)點(diǎn)的子節(jié)點(diǎn)排监，以此類推) |
| A > E | 元素A的任一子元素E(也就是直系后代) |
| E:first-child | 任一是其父母結(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)的元素E |
| B + E | 元素B的任一下一個(gè)兄弟元素E |
| B ~ E | B元素后面的擁有共同父元素的兄弟元素E |
你可以任意組合以表達(dá)更復(fù)雜的關(guān)系狰右。
你還可以使用星號(hào)（*）來(lái)表示”任意元素“。
引用自：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors
