如何在表格单元格中正确覆盖Bulma CSS以恢复HTML元素样式

Bulma的.table类会统一重置单元格内的标题、列表等元素样式，导致Markdown生成的HTML无法正常显示。以下是两种针对性的解决方法：

方法一：全局恢复表格内所有元素样式 #

在Bulma样式之后引入自定义CSS（确保优先级足够），直接覆盖Bulma的重置规则：

/* 恢复单元格内标题的字体大小与权重 */
.table td h1,
.table td h2,
.table td h3,
.table td h4,
.table td h5,
.table td h6 {
  margin: 0.5em 0;
  font-weight: bold;
}
.table td h1 { font-size: 2em; }
.table td h2 { font-size: 1.75em; }
.table td h3 { font-size: 1.5em; }
.table td h4 { font-size: 1.25em; }
.table td h5 { font-size: 1.1em; }
.table td h6 { font-size: 1em; }

/* 恢复无序列表的项目符号与缩进 */
.table td ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin: 0.5em 0;
}
.table td ul li { margin: 0.25em 0; }

/* 可选：恢复有序列表样式 */
.table td ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin: 0.5em 0;
}

方法二：给目标单元格添加专属类 #

如果只有部分单元格需要恢复样式，给对应单元格添加markdown-content类，再编写针对性样式：

<td class="markdown-content">
    <h1>A Title</h1>
    <ul>
        <li>One</li>
        <li>Two</li>
    </ul>
</td>

对应的CSS：

.markdown-content h1 {
  font-size: 2em;
  font-weight: bold;
  margin: 0.5em 0;
}
.markdown-content ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin: 0.5em 0;
}
/* 按需补充其他元素的样式规则 */

关于all: unset无效的原因 #

all: unset是重置单元格自身的样式，但Bulma的样式是直接作用在单元格内的子元素（h1、ul等）上的，所以该属性无法覆盖子元素的重置规则，必须直接针对子元素编写样式。

内容的提问来源于stack exchange，提问作者Todd