为何body的CSS样式未生效？附相关代码示例

你提供的代码如下：

JavaScript #

function ReverseString(Text) {
  var ReturnValue = "";
  for (var i = (Text.length - 1); i >= 0; i--) {
    ReturnValue += Text.at(i);
  }
  return ReturnValue;
}

function ReverseUserInput() {
  var Input = document.forms[0].elements[0].value;
  document.forms[0].elements[0].value = ReverseString(Input);
}

CSS #

body {
  font-size: 14px;
}

HTML #

<form>
  <textarea rows="4" cols="26" class=gross>Text</textarea>
  <input type="button" value="Reverse" onClick="ReverseUserInput()">
</form>

样式未生效的常见原因： #

• CSS未正确嵌入/引入到HTML文档：如果你的CSS代码只是单独存在，没有通过<style>标签嵌入到HTML的<head>中，也没有通过<link>标签链接外部CSS文件，浏览器根本不会加载这个样式规则。必须确保CSS代码被正确包含在HTML文档里。

• 表单控件的默认样式覆盖继承值：浏览器对<textarea>、<input>这类表单元素有内置的默认字体大小样式，它们不会完全继承body的font-size。如果你的目标是让表单控件也使用14px字体，需要直接给这些元素设置样式，比如：

  body, textarea, input {
    font-size: 14px;
  }
  

• 存在更高优先级的CSS规则：如果页面中还有其他CSS规则（比如内联样式、ID选择器、更具体的类选择器），它们的优先级会高于body这个元素选择器，从而覆盖你的样式。检查是否有其他冲突的样式规则存在。

内容的提问来源于stack exchange，提问作者Norbert Willhelm