如何在 Asciidoc 中为表格标题、行和单元格元素添加特定的 css 属性

如何解决如何在 Asciidoc 中为表格标题、行和单元格元素添加特定的 css 属性

可以在 asciidoc 中向表中添加特定的类，如下所示：

asciidoc

[.custom]
[cols="40a,80a",options="header"]
|===

|First Name
|Family Name

|John
|Smith

|==

HTML（Antora 运行后）

<table class="tableblock frame-all grid-all stretch custom">
..
..
<thead>
<tr>
<th class="tableblock halign-left valign-top"><strong>First Name</strong></th>
<th class="tableblock halign-left valign-top"><strong>Family Name</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph"><p>John</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph"><p>Smith</p></div></div></td>
</tr>

因此，“自定义”的“角色”已应用于

元素。 但是，我还想为 和

、

元素指定特定的属性。 我该怎么做？ 我已经尝试过： |[.custom]First Name 对于第一个元素，并且： |[.custom]John 对于 td 元素 但这只会在转换为 html 时给我以下内容： <th class="tableblock halign-left valign-top"><strong class="custom">First Name</strong> </th> .. <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph"><p>[.custom]John</p></div></div></td> 我如何实现以下目标： <th class="tableblock halign-left valign-top custom"><strong>First Name</strong></th> 和 <tr class="tableblock halign-left valign-top custom"><div class="content"><div class="paragraph"><p>John</p></div></div></td> 1 个答案: 答案 0 :(得分：0) 您应该为内联角色使用分隔符，以确保它们解析一致。例如： | [.custom]*John* | [.specific]`Woo` 分隔符影响生成的 HTML，因此第一个实例生成 <strong> 标记，第二个实例生成 <code> 块。虽然两者都有指定的类。 遗憾的是，该角色适用于文本内容，而不是 <th> 或 <td>。目前无法为单元格本身指定角色。 要实现您想要的演示，您必须使用基于表格类的 CSS 选择器。这需要向您的 Antora UI 添加自定义 CSS。也许是这样的： table.custom th,table.custom td { /* appropriate styles */ } 相关问题 为什么chrome会为h *元素添加特定属性？ 将css属性添加到表格单元格 表格中特定单元格的行标题和列标题 网格内表格标题单元格内的新行属性 jQuery：如何动态地将表属性添加到行中的特定单元格？ 在JavaScript中为特定元素添加属性 如何在元素的标题属性中添加html标签？ 在具有标题属性的表单元格上添加CSS伪类 如何在 Asciidoc 中为表格标题、行和单元格元素添加特定的 css 属性 通过js为特定样式的元素添加标题 最新问题 我写了这段代码，但我无法理解我的错误 在此代码中是否有使用“this”的替代方法？ 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化 为什么我的 Onclick 箭头功能在 React 中不起作用？ java中的random.expovariate() 每千个数字得到 是否有可能使 loadstring 不可能等于打印？卢阿 启动调试会话时出错 - Google Cloud Shell 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？ Appscript 通过会议在 Google 日历中发送电子邮件和创建活动

解决方法

您应该为内联角色使用分隔符，以确保它们解析一致。例如：

| [.custom]*John*
| [.specific]`Woo`

分隔符影响生成的 HTML，因此第一个实例生成 <strong> 标记，第二个实例生成 <code> 块。虽然两者都有指定的类。

遗憾的是，该角色适用于文本内容，而不是 <th> 或 <td>。目前无法为单元格本身指定角色。

要实现您想要的演示，您必须使用基于表格类的 CSS 选择器。这需要向您的 Antora UI 添加自定义 CSS。也许是这样的：

table.custom th,table.custom td {
 /* appropriate styles */
}