我是编码新手。所以基本上我在进入训练营之前正在做一个在线 Web 开发人员课程，我在我的代码中使用 Sublime Text，我超级卡住了！
因此，在本练习中，样式是在 html 中完成的。 问题出在：John 正文 {我的代码 颜色：红色;样式不显示！
<!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 样式有错误 #special 颜色不是 css 属性，请将其更改为 color。此外，您在 li 属性后缺少一个 }。
试试这个
<style type="text/css">
body {
color: red;
}
ul {
color: blue;
}
li {
color: orange;
}
.highlight {
color: yellow;
}
#special {
color: pink;
}
</style>
您使用了引用文本颜色的color。 您呈现的代码覆盖了您设置的元素，存在很大的混乱，导致代码不起作用。
标记中还缺少li}
body {
color: red;
}
ul {
color: blue;
}
li {
color: orange;
}
.highlight {
color: yellow;
}
#special {
color: pink; /* no such thing colour in css */
}
另外，为什么在同一li标记中应用了specail ID和突出显示类，这导致其中一个元素被覆盖另一个元素。
<li id="special">John</li>
<li>Paul</li>
<li class="highlight">George</li>
<li>Ringo</li>
你正在编写你的css，就好像你在使用sass一样。香草 css 不支持嵌套。为了针对具有.highlight的li，您应该说li.highlight {...}.或者在这种情况下，您可以只使用.highlight. 对于您的特殊课程，您已将颜色拼写为颜色。 这是您的固定代码：
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 的末尾还有一个额外的结束样式标签或某种原因。