是否可以在不更改 HTML 代码的情况下更改多个特定的页脚标签？答案

【问题标题】：Is it possible to change a specific footer tag out of multiple, without changing the HTML code?是否可以在不更改 HTML 代码的情况下更改多个特定的页脚标签？
【发布时间】：2021-11-03 03:17:49
【问题描述】：

我目前正在学习 Web 开发，并且处于一个艰难的阶段。我们被分配了一个任务，我们应该设计一个 HTML 代码，而不需要改变它。

我的问题是，是否还有样式特定的页脚（底部一个）标签（不在另一个标签内，例如，div 标签，也使它变得更加困难） CSS 中的 HTML 代码，而不更改 HTML 代码中的任何内容？

<html> 
  <head> 
    <title>Modul 2 - uppgift 2</title>
    <link rel="stylesheet" href="stil.css"> 
  </head> 
  <body>
    <div id="wrapper"> 
      <header>
        <h1></h1>
      </header> 
      <article> 
        <section> 
          <header>
            <h2>Om CSS</h2>
          </header> 
          <p> .</p> 
          <p></p> 
          <p class="linktext"></p>
          <footer></footer> 
        </section> 
        <section> 
          <header>
            <h2></h2>
          </header>
          <p></p>
          <p>.</p> 
          <p class="linktext"></p> 
          <footer></footer> 
        </section> 
      </article>
      <footer></footer> 
    </div> 
  </body> 
</html>

我一直在尝试自己解决这个问题，并尝试进行一些研究但没有任何结果，这就是我来到这里的原因。像这样的问题，老师也没有真正的帮助......

我希望我把问题说清楚了，也许是我在网上找不到任何东西的原因，因为我的措辞方式，让我知道！并提前感谢！

【问题讨论】：

嘿伙计，你能不能分享你的 html 和可能想要的结果，所以我们可以帮助你，干杯 :)
没问题，我给你加了，你可以在sn-p或者你问题的Code Sample里加代码。好的，您需要设置什么页脚样式？
非常感谢，我很感激！我正在尝试在不更改代码的情况下设置底部样式。但理论上，我可以通过将页脚包装在 div 标签中轻松做到这一点，对吧？
是的，你可以，看看@LattyS 的答案，这是一种无需接触 html 即可设置元素样式的方法

标签： html css

【解决方案1】：

您可以使用:nth-child 伪类选择最后一个footer。请阅读更多here

#wrapper > footer {
  color: red;
  font-style: italic;
}
/*
OR
#wrapper footer:nth-child(4) {
  color: red;
  font-style: italic;
}*/

<html> 
  <head> 
    <title>Modul 2 - uppgift 2</title>
    <link rel="stylesheet" href="stil.css"> 
  </head> 
  <body>
    <div id="wrapper"> 
      <header>
        <h1></h1>
      </header> 
      <article> 
        <section> 
          <header>
            <h2>Om CSS</h2>
          </header> 
          <p> .</p> 
          <p></p> 
          <p class="linktext"></p>
          <footer>first footer</footer> 
        </section> 
        <section> 
          <header>
            <h2></h2>
          </header>
          <p></p>
          <p>.</p> 
          <p class="linktext"></p> 
          <footer>second footer</footer> 
        </section> 
      </article>
      <aside>
      </aside>
      <footer>last footer</footer> 
    </div> 
  </body> 
</html>

【讨论】：

嗯，试了一下，由于某种原因，它使所有的页脚都着色了，但是这个伪类是我一定要记住的，因为它可以派上用场！欣赏！
我认为我做得对吗？ gyazo.com/c940812974976e9113ecbb91df5fc8c3 这是一张代码图片（为了更好地引用），显示所有页脚都变成红色，即使带有文本“Hermods”的页脚是最后一个页脚。我假设我在这里做错了什么？
对不起伙计，我现在不好看看，我更新了答案
不幸的是，这也不起作用，我仍然相信我在这里做错了......这是包含CSS的代码（文本和所有内容，但都是瑞典语）有帮助gyazo.com/ae70b0aa91483000f37020add8eb0262 gyazo.com/b747c8251e00ae205b381d7a5557de83
@JayBerg 这不是一个可靠的解决方案，您可能会结束选择页脚内部部分。请改用#wrapper > footer {}

【解决方案2】：

我想你应该看看 css Child combinator (>) 和 :nth-child() pseudo class

例如，如果您想在页脚中选择第三个 div：

<footer>
  <div>Lorem ipsum 1</div>
  <div>Lorem ipsum 2</div>
  <div>Lorem ipsum 3</div>
</footer>

还有css：

footer div:nth-child(3) {
  background: red;
}

【讨论】：

谢谢！我会确保我通读了这篇文章并尝试从中做出一些事情！感谢 Latty 和 @NikolaPavicevic 的帮助