Question

我在应用此CSS类时遇到问题。 red-text类未应用于我的HTML。为什么呢？

这是CSS：

<style>
.red-text {
  color: #FF0000
}
.green-text {
color: #00FF00
}
.dodger-blue-text {
color: #2998E4
}
.orange-text {
color: #FFA500
}
</style>

HTML：

<h1 class="red-text">I am red!</h1>
<h2 class="green-text">I am green!</h2>
<h3 class="dodger-blue-text">I am dodger blue!</h3>
<h4 class="orange-text">I am orange!</h4>

为什么red-text没有被应用？

Answer 1

它正在运作。您使用的是内部还是外部样式表。如果外部意味着删除<style>代码

.red-text {
  color: #FF0000;
}
.green-text {
color: #00FF00;
}
.dodger-blue-text {
color: #2998E4;
}
.orange-text {
color: #FFA500;
}

<h1 class="red-text">I am red!</h1>
<h2 class="green-text">I am green!</h2>
<h3 class="dodger-blue-text">I am dodger blue!</h3>
<h4 class="orange-text">I am orange!</h4>

Answer 2

您的CSS不正确：它不应包含<style>标记。

这可能是.red-text规则无法解决的原因：浏览器无法解析规则<style>.red-style {color: #FF0000}，因为它不是有效的CSS。

删除<style>标记，这应该有用。

顺便提一下，请注意浏览器也无法解析样式表的最后一个</style>规则。但这不会影响任何事情，这就是.orange-text规则有效的原因。

编辑：它更有趣。浏览器会忽略</style>标记，至少是Chrome。如果您使用Chrome检查器检查此JSFiddle，则可以找到以下内容：

<style type="text/css">
    <style>
.red-text {
  color: #FF0000
}
.green-text {
color: #00FF00
}
.dodger-blue-text {
color: #2998E4
}
.orange-text {
color: #FFA500
}
</style>

奇怪的是，Chrome可以检测到关闭的</style>标记不应该存在，但是无法对开放的<style>标记执行相同操作。请注意，如果您将结束标记拼错为</stylle>，则Chrome不会将其删除。

我该如何应用这个css类

2 个答案: