HTML 元素 - 不同类型，但共享相同的类名 - 行为异常

Question

所以我正在构建一个网站，其中有几个页面描述(幻想)人物和地点。为此，几类页面都有一个 profilebox其中包括标题、图像和带有一些摘要数据的表格等内容。

此类框的 HTML 如下所示:

<profilebox class="red">
  <p><i>His Majesty</i><br><span class="big-and-strong">The King</span>
  </p>
  <figure class="pbox"><img class="pbox" src="../images/armsroyal.svg"> 
  </figure>
  <table class="pbox">
    <tr>
      <td>Surname</td>
      <td>N/A</td>
    </tr>
    <tr>
      <td>Forename</td>
      <td>N/A</td>
    </tr>
    <tr>
      <td>Rank</td>
      <td>King</td>
    </tr>
    <tr>
      <td>Addressed As</td>
      <td>&lsquo;&lsquo;Your Majesty&rsquo;&rsquo;</td>
    </tr>
  </table>
</profilebox>

而 CSS 看起来像这样:

profilebox {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
  margin-right: 0em;
  width: 400px;
  float: right;
  text-align: center;
  padding: 1em;
  border-color: black;
  border-style: solid;
  border-width: 0px 0px 0px 5px;
}

table {
  border-collapse: collapse;
  width: 600px;
}

.mini {
  width: 400px;
}

.maxi {
  width: 100%;
}

.pbox {
  width: 100%;
}

img {
  margin: 1em;
}

.pbox {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

figure.pbox {
  width: 100%;
}

现在 pbox表格类的宽度设置为 100%，因此配置文件框中的表格应该填满其父元素，对吗？ (我能感觉到“错了!”。)然而，这是 Chromium 中页面的实际样子:

Table too narrow

如果我替换 <table class="pbox">与 <table class="maxi"> ，我得到了想要的结果:

Table just right

但是 maxi和 pbox表的类是相同的!知道这里发生了什么吗？

Answer 1

我曾假设 - 错误地 - 如果你输入类似的内容:

CSS

element1 {
  property-a: setting1;
}

.class-name {
  property-b: setting2;
}

element2 {
  property-c: setting3;
}

.class-name {
  property-d: setting4;
}

HTML

  <element2 class="class-name"/>

然后 element2 将具有属性:

• property-c: setting3;
• 属性-d: setting4;

事实上，.class-name 的所有 定义都将被应用，因此element2 将具有属性:

• property-b: setting2;
• property-c: setting3;
• 属性-d: setting4;

如果我们修改CSS如下:

element1 {
  property-a: setting1;
}

element1.class-name {
  property-b: setting2;
}

element2 {
  property-c: setting3;
}

element2.class-name {
  property-d: setting4;
}

然后一切正常!