HTML: <div> 标签在没有说明的情况下使 <p> 内容加粗

Question

我今天一直在尝试根据视频游戏中的角色制作一个迷你网站，我决定实施一些标签以将内容分成不同的部分。我决定在角色拥有的四个 'abilities' 中的每一个上都放置标签，并且突然将 div 元素中的段落元素中的文本设为粗体。我不相信我自己让他们大胆，有人知道为什么会这样吗？

我为 head 元素中的 div 标签设置了 font-weight 值为 400 的样式来解决这个问题，但我认为没有必要这样做。

我想我在这里忽略了一些基本的东西，如果能以不同的眼光看待我的工作来发现错误，那就太好了。感谢任何可以帮助我的人，我在下面发布代码。

body {
  background-color: purple;
  color: peachpuff;
}

img {
  float: left;
}

p {
  color: peachpuff;
  font-size: 20px;
}

div {
  color: peachpuff;
  font-size: 20px;
  font-weight: 400;
}

h3 {
  font-size: 30px;
  margin: 0px;
  text-decoration: underline;
}

<h1 style="color:peachpuff;text-align:center;font-size:64px;text-decoration:underline;margin:0px;">Enigma</h1>
<p style="margin:0px;text-align:center;">Enigma is a hero from Dota 2.</p>
<h2 style="font-size:45px;margin:47px 50px 0px;text-decoration:underline;color:peachpuff;">Abilities
  <h2>

    <div>
      <h3>Malefice</h3>
      <p style="font-size:18px;margin-top:3px;">Focuses Enigma's power on a target, causing it to take damage and become repeatedly stunned for multiple instances. An instance strikes every 2 seconds.</p>
    </div>

    <div>
      <h3>Demonic Conversion</h3>
      <p style="font-size:18px;margin-top:3px;">Transforms a creep into three fragments of Enigma himself. These eidolons are all under Enigma's control, and repeated successful attacks cause them to multiply. When this happens, the eidolons have their health restored.</p>
    </div>

    <div>
      <h3>Midnight Pulse</h3>
      <p style="font-size:18px;margin-top:3px;">Steeps an area in dark resonance, damaging enemy units based on their max HP.</p>
      <p style="color:purple;margin:-1px 0px 0px 0px;">lorem ipsum.</p>
    </div>

    <div>
      <h3>Black Hole</h3>
      <p style="font-size:18px;margin-top:3px;">Summons a vortex that sucks in nearby enemy units. Enemies affected by Black Hole cannot move, attack, or cast spells.</p>
    </div>

Answer 1

有两个编码拼写错误导致了这个问题。首先，您需要用右尖括号关闭主体。其次，您需要用正斜杠关闭 <h2>。

<!DOCTYPE html>

<head>
  <style>
    body {
      background-color: purple;
      color: peachpuff;
    }
    
    img {
      float: left;
    }
    
    p {
      color: peachpuff;
      font-size: 20px;
    }
    
    div {
      color: peachpuff;
      font-size: 20px;
      /*font-weight: 400;*/
    }
    
    h3 {
      font-size: 30px;
      margin: 0px;
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <h1 style="color:peachpuff;text-align:center;font-size:64px;text-decoration:underline;margin:0px;">Enigma</h1>
  <p style="margin:0px;text-align:center;">Enigma is a hero from Dota 2.</p>
  <h2 style="font-size:45px;margin:47px 50px 0px;text-decoration:underline;color:peachpuff;">Abilities
  </h2>

  <div>
    <h3>Malefice</h3>
    <p style="font-size:18px;margin-top:3px;">Focuses Enigma's power on a target, causing it to take damage and become repeatedly stunned for multiple instances. An instance strikes every 2 seconds.</p>
  </div>

  <div>
    <h3>Demonic Conversion</h3>
    <p style="font-size:18px;margin-top:3px;">Transforms a creep into three fragments of Enigma himself. These eidolons are all under Enigma's control, and repeated successful attacks cause them to multiply. When this happens, the eidolons have their health restored.</p>
  </div>

  <div>
    <h3>Midnight Pulse</h3>
    <p style="font-size:18px;margin-top:3px;">Steeps an area in dark resonance, damaging enemy units based on their max HP.</p>
    <p style="color:purple;margin:-1px 0px 0px 0px;">lorem ipsum.</p>
  </div>

  <div>
    <h3>Black Hole</h3>
    <p style="font-size:18px;margin-top:3px;">Summons a vortex that sucks in nearby enemy units. Enemies affected by Black Hole cannot move, attack, or cast spells.</p>
  </div>
</body>

HTML: <div> 标签在没有说明的情况下使 <p> 内容加粗

HTML: <div> tag making <p> content bold without instruction

html

bold