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 level元素，而使用span而不是inline element，它不会导致文本中断，而且仅用于此类造型。

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

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

注意：较旧版本的IE将遇到nth-of-type()的问题明智地使用它

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

1 个答案: