所以我正在 Codeacademy 上学习 HTML/CSS，我只是想知道为什么我不能将段落标记放入这部分代码中:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<!--Add your HTML below!-->
<div>
<a href="http://Link">Google</a>
<a href="http://Link">Google</a>
<a href="Link">MSN</a>
</div>
</body>
</html>
在哪里<a href>是。它弄乱了 CSS，在这里:
a:hover{
text-decoration: none;}
a:first-child{
color:#CDBE70;
}
a:nth-child(3){
color:#ffc125;
}
不确定代码是否会在此处正确显示，因此我将相应地对其进行编辑。
最佳答案
first-child和 nth-child选择器与它们之前的标识符无关!虽然你可能认为 a:first-child会影响你的第一个<a>标签，它实际上只影响 <a>也是第一个 child 的标签。所以，如果你添加一个 <p>在你的链接之前，你所有的 CSS 都将被丢弃。
听起来你想要first-of-type和 nth-of-type .这些规则的功能与您期望的一样。
编辑:
想象一下下面的列表(我假设它看起来像你想要做的；如果不是，请澄清。)
<div>
<p>Hello!</p>
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
</div>
在这种情况下，一个 a:first-child规则不会匹配任何，因为没有<a>标签也是 first-child .有一个 <p>标记是第一个 child ，并且有 <a>标签是第二个、第三个和第四个 child ，但没有 a:first-child .
关于html - Codecademy代码-CSS选择器 18/23，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20590552/