将不同的CSS样式应用于文本

Question

我有一个<table> ，其中有一些文本：

<table>
  <tr>
    <td>
      <b>Title</b>
      <br />
      Some description text
    </td>
  </tr>
</table>

效果很好，只不过现在我想给标题和说明添加不同的文本颜色。 我想保持它们当前的间距，否则我会这样做：

<td>
  <p class="title">Title</p>
  <p class="desc">Some description text</p>
</td>

使用“ <p>”元素似乎注入了新的一行，而不是更好的“ <br />”（在我看来至少是更好的）。 但是，如果我不使用“ p”，则不确定如何将不同的样式应用于任一文本。

谢谢

Answer 1

将以下样式添加到您的p标签中：

的CSS

p {
    padding: 0px;
    margin: 0px;
}

h1 {
    margin-bottom: 0px;
}

html

<td>
    <h1 class="title">Title</h1>
    <p class="desc">Some description text</p>
</td>

Answer 2

这个怎么样？

td {
  color: orange;
}

td b {
  color: blue;
}

Answer 3

使用“ <p>”元素似乎注入了新的一行，而不是更好的“ <br />”（在我看来至少是更好的）

不，在任何人看来都不是更好。

只需为p样式，例如：

p { margin-bottom: 0; }

而且看起来您不是将表格用于表格数据，而是用于布局目的，这很糟糕。

同样，即使p标签在语义上也不正确。 为此使用标题标签。

另一个优点是您不必使用那些丑陋的b标签。 即使您需要使用b功能，也应使用strong元素。

Answer 4

如果您赋予不寻常的属性，则可以执行任何操作。

CSS:
        tr[unusual="1"] {
            background-color: yellow;
        }

HTML:

        <tr unusual="1">
        <td></td>
        </tr>

Answer 5

您显示的第二个代码更好，因为在语义上更正确。 更好的是：

    <td>
        <h3>Title</h3> <!-- this is a title, so mark it as one -->
        <p>Some description text</p> <!-- this is a piece of text, so mark it as one -->
    </td>

并使用以下CSS：

h3,p {
    margin:0;
}
h3 {
    color:red;
}
p {
    color:blue;
}