Question

我正在尝试应用<td>元素和<b>元素的样式，而不必复制任何CSS。 <b>元素位于我的<td>元素

中

HTML：

<tr>
    <td id='special_instructions_cart' colspan='2'>
        <b id='special_instructions_cart'>Special Instructions</b> <!--Adds Extra Padding-->
        <br>Special Instructions goes here
    </td>
</tr>

以下是<td>元素的CSS：

#special_instructions_cart {
    padding-left: 30px;
    margin-top: 10px;
    font-size:14px;
}

我试过这样做：

#special_instructions_cart, b {
    padding-left: 30px;
    margin-top: 10px;
    font-size:14px;
}

但它只对“特别说明”这两个词加了额外的填充。

Answer 1

您的代码需要一些工作。首先，ID（#符号表示ID）意味着只使用一次。如果您需要使用相同的标识符将多个元素组合在一起，请改用class功能。

我很难理解你的问题，但假设我正确地阅读它，你应该从以下代码开始;我只是将ID选择器切换为Class选择器：

HTML：

<tr>
    <td class='special_instructions_cart' colspan='2'>
        <b class='special_instructions_cart'>Special Instructions</b> <!--Adds Extra Padding-->
    <br> Special Instructions goes here</td>
</tr>

CSS：

.special_instructions_cart {
    padding-left: 30px;
    margin-top: 10px;
    font-size: 14px;
}

现在，这段代码更友好，更符合标准，但正如您将看到的那样，如果应用它，则缩进对第二行不起作用。这是因为单元格显示为特殊类型：table-cell，实际上显示inline，而不是阻止。所以要真正解决这个问题，我们需要将新行包装在一个单独的元素中，然后使用CSS调用它：

HTML：

 <tr>
    <td class='special_instructions_cart' colspan='2'>
        <b class='special_instructions_cart'>Special Instructions</b> <!--Adds Extra Padding-->
    <br> <span>Special Instructions goes here</span></td>
</tr>

CSS：

.special_instructions_cart, span {
    padding-left: 30px;
    margin-top: 10px;
    font-size:14px;
}

这第二个片段应包含您正在寻找的效果。我已将第二行包装在span元素中，然后将其添加到CSS中。新CSS将样式分别应用于具有类.special_instructions_cart的元素和span元素。

最后，我建议您考虑是否确实要使用<tr>和<td>元素;表格实际上是用于表格数据而不是页面布局控制。

如何将样式应用于父元素和内联子元素？

1 个答案: