html - 防止向垂直堆叠的单元格内容添加样式？

Question

我有一排单元格，每个单元格中都有文本。以一个单元格为例，如果我为单元格中的单个单词添加样式（假设“测试一二三”，我改为：）

<td class="cell">testing <p class="highlight1">1</p> <p class="highlight2">2</p> <a href="#">3</a></p></td>

单元格内容垂直堆叠，新行上的测试、1 和 2

Answer 1

这是因为pis 一个block level元素，使用spanwhich is an 代替inline element它不会导致文本出现任何中断，而且它仅用于这种类型的样式。

如果您有兴趣稍微重构您的代码..您可以将其写为

<td class="cell">
   testing 
   <span>1</span>
   <span>2</span> 
   <a href="#">3</a>
</td>

而不是您可以使用nth-of-typeCSS 选择器将样式应用于您的跨度元素，而无需调用类

.cell span:nth-of-type(1) {
   /* Targets 1st span element inside .cell */
}

.cell span:nth-of-type(2) {
   /* Targets 2nd span element inside .cell */
}

.cell a {
   /* Targets a element inside .cell */
}

注意：旧版本的 IE 会出现问题，nth-of-type()因此请明智地使用它