1.偽類和偽元素：

簡單的偽類實例

:first-chlid

:last-child

:only-child

:invalid

用戶行為偽類

• :hover——上面提到過，只會在用戶將指針挪到元素上的時候才會激活，一般就是鏈接元素。
• :focus——只會在用戶使用鍵盤控制，選定元素的時候激活。

偽元素以類似方式表現。不過表現得是像你往標記文本中加入全新的 HTML 元素一樣，而不是向現有的元素上應用類。

::first-line偽元素選擇器會值得信賴地做到這件事——即使單詞/字符的數目改變，它也只會選中第一行。

有一組特別的偽元素，它們和content屬性一同使用，使用 CSS 將內容插入到你的文檔中。

你能用這些插入一個文本字符串，和在下面的實時示例里那樣。試著改變content屬性的文本值，看看輸出是怎么改變的。你也能改變::before偽元素為::after，看到這段文本插入到了元素的末尾而不是開頭。

2.關系選擇器：

?子代關系選擇器是個大于號（>），只會在選擇器選中直接子元素的時候匹配。繼承關系上更遠的后代則不會匹配。例如

?

<ul><li>Unordered item</li><li>Unordered item<ol><li>Item 1</li><li>Item 2</li></ol></li>
</ul>

ul > li {border-top: 5px solid red;
}

?

?

鄰接兄弟選擇器（+）用來選中恰好處于另一個在繼承關系上同級的元素旁邊的物件。例如，選中所有緊隨<p>元素之后的<img>元素：

cssCopy to Clipboard

p + img

常見的使用場景是，改變緊跟著一個標題的段的某些表現方面，就像是我下面的示例那樣。這里我們尋找一個緊挨<h1>的段，然后樣式化它。

如果你往<h1>和<p>之間插入其他的某個元素，例如<h2>，你將會發現，段落不再與選擇器匹配，因而不會應用元素鄰接時的前景和背景色。

?

如果你想選中一個元素的兄弟元素，即使它們不直接相鄰，你還是可以使用通用兄弟關系選擇器（~）。要選中所有的<p>元素后任何地方的<img>元素，我們會這樣做：

p ~ img

3.屬性選擇器

存在是否選擇器

這些選擇器允許基于一個元素自身是否存在（例如href）或者基于各式不同的按屬性值的匹配，來選取元素。

選擇器	示例	描述
[attr]	a[title]	匹配帶有一個名為attr的屬性的元素——方括號里的值。
[attr=value]	a[href="https://example.com"]	匹配帶有一個名為attr的屬性的元素，其值正為value——引號中的字符串。
[attr~=value]	p[class~="special"]	匹配帶有一個名為attr的屬性的元素，其值正為value，或者匹配帶有一個attr屬性的元素，其值有一個或者更多，至少有一個和value匹配。 注意，在一列中的好幾個值，是用空格隔開的。
[attr|=value]	div[lang|="zh"]	匹配帶有一個名為attr的屬性的元素，其值可正為value，或者開始為value，后面緊隨著一個連字符。

?

下面的示例中，你可以看到這些選擇器是怎樣使用的。

• 使用li[class]，我們就能匹配任何有 class 屬性的選擇器。這匹配了除了第一項以外的所有項。
• li[class="a"]匹配帶有一個a類的選擇器，不過不會選中一部分值為a而另一部分是另一個用空格隔開的值的類，它選中了第二項。
• li[class~="a"]會匹配一個a類，不過也可以匹配一列用空格分開、包含a類的值，它選中了第二和第三項。

<h1>Attribute presence and value selectors</h1>
<ul><li>Item 1</li><li class="a">Item 2</li><li class="a b">Item 3</li><li class="ab">Item 4</li>
</ul>

?