我的 class/id/highlight 标签不起作用答案

【问题标题】：My class/id/highlight tags are not working我的 class/id/highlight 标签不起作用
【发布时间】：2020-05-02 15:05:01
【问题描述】：

我是编码新手。所以基本上我在进入训练营之前正在学习在线网络开发人员课程，并且我正在使用 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 标记不起作用的问题？
为了提供帮助，最好不仅包括页面的来源，还包括一个（裁剪的）图像，显示它对您的外观以及您期望它的外观结果。
li 的样式规则已损坏；它缺少结束 } （这不是唯一的问题，但它会阻止修复其他所有问题）。
哇！谢谢OdatNurd！！！！它解决了这个问题。它看起来像这个例子。万分感谢！对于初学者的任何提示将不胜感激。

标签： html css class styles

【解决方案1】：

您在编写 css 时就像在使用 sass 一样。 Vanilla 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 末尾似乎还有一个额外的结束样式标记或某种原因。

【讨论】：

【解决方案2】：

您使用了color 指代文本颜色。您提供的代码覆盖了您设置的元素，存在很大的混乱，导致代码无法正常工作。

li 标签中也缺少}

        body {
            color: red;
        }
        ul { 
          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>

【讨论】：

【解决方案3】：

id #special color is not a css property，您的样式有错误，请将其更改为颜色。此外，您的 li 属性后还缺少一个 }。

试试这个

<style type="text/css">
     body {
        color: red;
     }

     ul { 
     color: blue;
     }

     li {
        color: orange;
     }

     .highlight {
        color: yellow;
     }

     #special {
        color: pink;
     }

</style>

【讨论】：