Question

在以下代码中：

<div id="homePage">
   <div class="hero">

   </div>
 </div>

localhost和heroku都不接受嵌套div中的“hero”类。所有其他课程都在检查时出现，但不是这门课程。如果我检查div并在那里手动添加类，则会显示应用于该类的所有相关样式。为什么浏览器拒绝只加载一个类属性？

注意我正在使用react-bootstrap。

更新：我附上图片以进一步澄清

以下是我的编辑器中编写的源代码：

以下是如果检查代码被编译到浏览器中的方式（您会注意到#homePage id应用于外部div，但.hero类未应用于内部div。这是源代码我的困惑。

我可以手动将.hero类添加到devtools元素选项卡中，使其看起来像这样：

如果是这样，应用于该类的所有样式都会按预期填充视口，但显然这不是永久性的，因为它会在刷新时消失。

希望澄清事情。感谢。

Answer 1

其他div可能隐藏了这个div。尝试为你的CSS添加一个余地，让你的div看看它的位置。

更新

您需要使用className作为类的HTML元素的属性而不是类。因为阶级可以发生冲突。所以试试如下;

return (
<div id="homePage">
  <div className="hero">

  </div>
</div>
);

Answer 2

我发现了我的问题的答案。在react-bootstrap中，JSX添加类的标记与常规HTML中的标记不同。而不是

<div class="hero">

你必须给它贴上标签：

<div className="hero">

填充id的原因是在JSX中对元素应用id与在HTML中相同。

Answer 3

班级名称“英雄”没有错。我的猜测是你的实际html可能有一些小的语法错误，比如缺少“，＆gt;，/，=等等。

同时检查您可能运行的任何Javascript以从div中删除“hero”类的任何内容。

Answer 4

这看起来有点模糊，因为基于你的问题，似乎你理解标记是有效的。

我同意它看起来写得不错 - 我甚至检查过你的引号是否有效，并且看起来很好。所以要么你粘贴了有效的引号，要么你的来源是错误的，或者别的东西是错的。

您可以分享一下这种应用方式吗？这些HTML标签是硬编码的，还是通过javascript实例化的？

你是说Google / Firefox / Whatever检查员在源代码中没有看到class =“hero”，或者你是说造型本身没有应用？

我认为我们需要更多的澄清来帮助您做到最好。