我有以下的html代碼：CSS中的一線和一胎的特異性？
<!DOCTYPE html>
<html>
<head>
<style>
:first-line {
color: red;
}
:first-child {
color: blue;
}
</style>
</head>
<body>
<p>asdasdasdsad<br>sdfsdfs</p>
</body>
</html>
輸出是：
asdasdasdasd < - 紅
sdfsdfs < - 藍色。
但是，我在想的是，p標籤是身體的第一個孩子。第一個孩子是一個僞類，它的特異性爲10，第一行是一個僞元素，它的特異性爲1.因此，這兩行應顯示爲藍色文本，但我顯然是錯誤的。
請指出我的錯誤。非常感謝你。
我想當你使用<br>時，sdfsdfs進入一個新行，所以它不會是第一行，但它仍然是身體標記的第一個孩子，它將是藍色的。同樣如你所指定的第一行的顏色，它將是紅色的，這很明顯。 （只是試圖推理）
:first-line選擇器直接應用於第一行，而:first-child選擇器是從它適用的元素繼承。
直接應用於該項目的樣式優先於繼承樣式。
您可以通過添加元素，id和類選擇器等方式使元素的選擇器更具體，但仍不能優先於應用於第一行的樣式。演示：http://jsfiddle.net/Guffa/3H4Ab/
謝謝，但我仍然無法理解爲什麼：一線選擇優先。這種特異性計算背後的機制是什麼？ –
特異性在這裏並不重要;這兩條規則實際上都適用 - 但適用於不同的要素'：first-child'會將樣式應用到'p'元素，使其文字顏色爲藍色。因此，第一行將從其父項（'p'元素）繼承該顏色。然而':: first-line'規則直接將第一行作爲目標，將樣式覆蓋爲紅色文本顏色，使其忽略繼承的值。這就像'
Foo bar baz
'仍然會使*「bar」*加粗，儘管'p'的規則可能會使字體的權重顯得很正常。 – poke@澤森黃：對此沒有任何特異性計算。 '：first-line'選擇符直接應用於第一行，而'：first-child'選擇符則應用於'p'元素。這使得藍色成爲繼承的風格，不會接管直接應用的紅色。 – Guffa
p標籤是身體的第一個孩子。第一個孩子是一個僞類，它的特異性爲10，第一行是僞元素，它的特異性爲1.
那麼，沒有。 first-line繼承了樣式並在僞類（10 1）中添加了1個僞元素，所以這是絕對正常的。
錯誤？這不是一個錯誤。這是CSS的工作方式。 '：first-line'會像'：first-child'一樣覆蓋應用於* general *選擇器的樣式。第一行應用於* content *，而「parent」：first-child樣式可以通過特異性優先來修改。 –