Question

<!DOCTYPE html>
<html>
  <head>
    <title>my web page</title>
    <meta name="author" content="akhil">
    <style>
      h1{color: red;font-size: 400%}
      p{color: red}
    </style>
  </head>
  <body>
    <section>
      <h1>hello how are you?</h1>
      <p>i am fine.<hr> what about you?</p>
    </section>
  </body>
</html>

在此文档中，样式适用于h1和p，但它不适用于hr代码后的行，如何将样式应用于hr代码后的行？

Answer 1

段落不能包含<hr />代码，因此<hr />后的所有文字都不在<p>代码中。最好以这种方式使用：

h1 {
  color: red;
  font-size: 400%;
}
p {
  color: red;
}

<section>
  <h1>hello how are you?</h1>
  <p>i am fine.</p>
  <hr />
  <p>what about you?</p>
</section>

这是浏览器呈现代码的方式：

您的内容不再位于<p />标记内。

Answer 2

你可以关闭并打开paragraf：

<p>i am fine.</p> <hr><p> what about you?</p>

样式不适用于HTML中的<hr />元素

2 个答案: