image.png
什么是偽類？什么是偽元素？
比如，你要把被鼠標懸停的鏈接變成黃色，你應該怎么選擇這個被鼠標懸停的鏈接？ 鏈接都是a標簽，問題是鏈接有很多種狀態，被訪問過的，沒被訪問過的，諸如此類。就需要下一級菜單進行更精確的區分。因此創建了偽類。
什么是偽元素呢？一個現實需求就是比如說如何選擇所有的偶數行文字？如何選擇每一段的第一個文字？
例子
偽類.
如下。注意。偽類都是以冒號開頭的。
a.red:visited {color: #FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
偽元素
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
偽類和偽元素的根本不同在于什么地方？
偽類和偽元素提出的意義？
偽元素在DOM樹中創建了一些抽象元素，這些抽象元素是不存在于文檔語言里的（可以理解為html源碼）。比如：documen接口不提供訪問元素內容的第一個字或者第一行的機制，而偽元素可以使開發者可以提取到這些信息。并且，一些偽元素可以使開發者獲取到不存在于源文檔中的內容（比如常見的::before,::after）。
比如，以first-line偽元素為例，這個如果沒有這個選擇器，那么怎么實現？那就只有用js了，而用js那就很麻煩了~
什么時候用偽類？
其他選擇器搞不定的時候。最后才考慮偽類。
css3新增了哪些偽類？
舉個例子first-of-type也就是選擇父元素的首個。也就是第一個。p
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>這是標題</h1>
<p>這是第一個段落。</p>
<p>這是第二個段落。</p>
<p>這是第三個段落。</p>
<p>這是第四個段落。</p>
</body>
</html>
結果是
image.png
再比如選擇空的p。用empty選擇器。
W3School在線測試工具 V2
過濾選擇器和偽類選擇器什么關系？
過濾選擇器主要是通過特定的過濾規則來篩選出所需要的DOM元素，過濾規則與CSS中的偽類選擇器語法相同。
據我觀察，過濾選擇器一般是jquery中的叫法。css中一般叫做偽類選擇器。不過也有人把jquery中的叫做偽類選擇器。
比如jquery選擇第一個元素是
:first
選取第一個元素（單個元素）
$('li:first')
css則是
li:first-child
還是有些區別的。
css3新增選擇器的側重點在哪？？
主要是關于結構類的選擇器。
image.png
