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

因为p是一个 block 级元素，使用span代替它是一个内联元素并且它不会在您的文本中造成任何中断，而且它仅用于此类样式。

如果你有兴趣稍微重构一下你的代码..你可以这样写

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

而且您不能使用 nth-of-type CSS 选择器将样式应用于您的 span 元素，而无需调用类

.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 */
}

Note: Older versions of IE will have trouble with nth-of-type() so use it wisely