Javascript CSS将不应用于带有innerHTML的待放置变量中的HTML代码

我有一些HTML代码要放在一个带有.innerHTML的按钮上，但是CSS的行为很奇怪。当我尝试将CSS应用于ID herpderp时，它不会做任何事情，也不会影响选择器子体

当我使用chrome开发者工具查看站点时，元素是正确嵌套的。如果herpderp不能以这种方式更改，那么为什么像img和p这样的全局选择器会更改？既然我不想使用内联样式或全局选择器，比如img、p和section，那么应用CSS的更好方法是什么呢

任何批评都是受欢迎的

HTML

CSS~有用吗

img { 
  display: none;
}

p {
  font-size: 5rem;
}

---

节herpDerp是使用javascript动态创建的。 如果要在该部分中设置图元样式，请使用封闭div选择图元

例如：

您还可以在javascript本身中指定样式信息。但在我看来，上述方法更好，因为它将样式和实现分离开来

选中此项：

---

您在连接中是否混合了双引号和单引号？您肯定在查看id。。。。你有，而且一定有。仅在css上使用来匹配具有给定id的元素，例如：abc matches。@Shiji.Jiang rem与em@Shiji.Jiang不同搜索时，我注意到我不正确。rem是一个有效单位。rem和em是一样的，但是基于根元素而不是父元素。@Shiji.Jiang我个人讨厌em，当你嵌套多个div时，em会随之扩展，所以事情会变得混乱哈哈，总有一些东西需要学习。

function changeContent(link) {
switch (link) {
    case 0:
        document.getElementById("content").innerHTML = herpDerp;
        break;
    }
}

var herpDerp = '<section id=\"herpDerp\">' +
                   "<h1>BLAHBLAH</h1> " +
                   "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>" +
                   "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>" +
                   "<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>"+
                   '<img src=\"img/foto.jpg\" alt="photo">' +
                "</section>";

#herpDerp, #herpDerp img, #herpDerp p {
   font-size: 5rem;
   visibility: hidden;
   background-color: #F00;
}

img { 
  display: none;
}

p {
  font-size: 5rem;
}

#content h1{
    color: red;
   font-size: 5rem;
}