我是编码新手。所以基本上我在进入训练营之前正在做在线网络开发人员课程，并且我在代码中使用Sublime Text，我超级固步自封！
因此，在本练习中，样式是在html中完成的。问题在于：约翰正文{my code颜色：红色；样式不显示！
<!DOCTYPE html>
<html>
<head>
<title>Specificity</title>
<style type="text/css">
body {
color: red;
}
ul {
color: blue;
}
li {
color: orange;
.highlight {
color: yellow;
}
#special {
colour: pink;
}
</style>
</head>
<body>
<p>Hello!!!</p>
<ul>
<li id="special" class="highlight">John</li>
<li>Paul</li>
<li class="highlight">George</li>
<li>Ringo</li>
</ul>
</style>
</body>
</html>
id的样式错误。＃特殊颜色不是css属性，请将其更改为color。另外，在li属性之后，您缺少}。
尝试一下
<style type="text/css">
body {
color: red;
}
ul {
color: blue;
}
li {
color: orange;
}
.highlight {
color: yellow;
}
#special {
color: pink;
}
</style>
您使用的color表示文本颜色，应使用background-color。您提供的代码会覆盖您设置的元素，这会造成很大的混乱，导致代码无法正常工作。
}标记中也缺少li
body {
background-color: red;
}
ul {
background-color: blue;
}
li {
color: orange;
}
.highlight {
color: yellow;
}
#special {
color: pink; /* no such thing colour in css */
}
还有为什么您在相同的li标签中应用了特殊ID并突出显示类，从而导致其中一个元素被另一个元素覆盖。
<li id="special">John</li>
<li>Paul</li>
<li class="highlight">George</li>
<li>Ringo</li>
您正在像使用sass一样编写CSS。 Vanilla CSS不支持嵌套。为了将li定位为.highlight，您应该说li.highlight {...}。或者在这种情况下，您可以只使用.highlight。对于特殊班级，您将颜色拼写为colour。这是您的固定代码：
body {
color: red;
}
ul {
color: blue;
}
li {
color: orange;
}
li.highlight {
color: yellow;
}
#special {
color: pink;
}<!DOCTYPE html>
<html>
<head>
<title>Specificity</title>
</head>
<body>
<p>Hello!!!</p>
<ul>
<li id="special" class="highlight">John</li>
<li>Paul</li>
<li class="highlight">George</li>
<li>Ringo</li>
</ul>
</body>
</html>您似乎还出于某种原因在html末尾添加了一个额外的结束样式标签。