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

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而不是block。 因此，要真正解决此问题，我们需要将新行包装在单独的元素中，然后使用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>元素。 表实际上是用于表格数据而不是页面布局控件。