我有以下 html 代码：
<!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 标签是 body 的第一个孩子。first-child 是一个伪类，其特殊性为 10，而 first-line 是一个伪元素，其特殊性为 1。因此，这两行都应该显示为蓝色文本，但我显然错了。
请指出我的错误。非常感谢。
所以,我偶然发现了一个奇怪的CSS行为试图覆盖nth-child
请考虑以下示例
li:nth-child(2n+1){
color: red;
font-weight:normal;
}
.hmm{
color:green;
font-weight:bold;
}<ul>
<li class="hmm">HMM</li>
<li>test</li>
<li class="hmm">HMM</li>
<li class="hmm">HMM</li>
<li>test</li>
</ul>问题是,为什么.hmm{...}声明不会覆盖li:nth-child声明？
也就是说,为什么所有HMM都不会变成大胆的绿色？我错过了什么或做错了什么？