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>

使用“＆lt; p＆gt;”元素似乎注入了一个很高的新线，而不是更好的“＆lt; br /＆gt;” （至少在我看来更好）。但如果我不使用“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

使用“＆lt; p＆gt;”元素似乎注入了一个很高的新线，而不是更好的“＆lt; br /＆gt;” （至少在我看来更好）

不，任何人认为都不好。

只需设置p您想要呈现的方式，例如：

p { margin-bottom: 0; }

此外，您似乎没有将表格用于表格数据，而是用于布局目的，这是不好的。“

即使p标记在语义上也不正确。为此使用标题标记。

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

Answer 4

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

    <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;
}

Answer 5

如果你给出一个不寻常的属性，你可以随心所欲。

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

HTML:

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

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

5 个答案: