为什么我无法设置我所指的表格的样式？答案

【问题标题】：Why am I not able to style the table I am referring to?为什么我无法设置我所指的表格的样式？
【发布时间】：2015-03-25 09:24:51
【问题描述】：

我遇到的第一个问题是我没有对我所说的“tb2”表进行样式设置。请注意，我通过调用第一个表“tb1”和另一个“tb2”来区分这两个表，所以我不明白为什么两者都会受到影响。

我遇到的第二个问题是表格边框不是我声明的 10px 纯绿色。这可能是因为“tb1”中的边框（我什至没有在代码中提及）与我尝试制作的新边框冲突吗？

如果有人能解开这个谜团，请，我需要你的帮助！我被困住了！

<!doctype html>
<html>
    <head>
        <style type="text/css">
            #tb2 table {border:10px solid green;}
            tr {background-color:black;}
            th {color:white;}
            td {border:5px dotted red;color:white;}
        </style>
    </head>
    <body>
        <table id="tb1" border="5" 
        width="50%" height="200" cellpadding="10" cellspacing="3">
        <tr><th colspan="3"><h2>Fruit!</h2></th></tr>
        <tr>
            <th>Strangers</th>
            <th>Friends</th>
            <th>Family</th>
        </tr>
            <td>Lemon</td>
            <td>Pear</td>
            <td>Blueberry</td>
        </tr>
            <td>Plum</td>
            <td>Apple</td>
            <td>Strawberry</td>
        </tr>
        </table>
        <table id="tb2">
        <tr><th colspan="3"><h2>Fruit!#2</h2></th></tr>
        <tr>
            <th>Strangers</th>
            <th>Friends</th>
            <th>Family</th>
        </tr>
            <td>Lemon</td>
            <td>Pear</td>
            <td>Blueberry</td>
        </tr>
            <td>Plum</td>
            <td>Apple</td>
            <td>Strawberry</td>
        </tr>
        </table>
    </body>
</html>

【问题讨论】：

您的 CSS 选择器错误。该表的 id 为 tb2，因此没有理由在选择器中包含单词 table。它应该只是 #tb2 您当前选择器的唯一工作方式是，如果您在表格周围有一个包含 id 为 tb2 的元素。
是的，只需删除 #tb2 之后的“表格”

标签： html css xhtml html-table

【解决方案1】：

试试这个：

#tb2 {border:10px solid green;}
tr {background-color:black;}
th {color:white;}
td {border:5px dotted red;color:white;}

由于元素“#tb2”直接应用于您的表格，因此您无需指定“表格”

【讨论】：

【解决方案2】：

您使用的选择器#tb2 table 将选择元素内的所有表，其中id 为“tb2”。在您的情况下，您需要table#tb2，它将选择所有带有“tb2”id 的表。

就语义而言，您可以从选择器中删除table，因为ids 理想情况下只引用页面上的一个元素。这样您就可以选择 #tb2。

更新：这将反映您所寻找的更容易实现。 http://jsfiddle.net/hzdxL18h/2/

#tb1 {
  border: 5px solid black;
  width: 50%;
  height: 200px;
  border-spacing: 3px;
  border-collapse: separate;
}
#tb1 td, #tb1 tr, #tb1 th {
  padding: 10px;
  border: 1px solid black;
}
#tb2 { border: 10px solid green; }
#tb2 tr { background-color: black; }
#tb2 th { color: white; }
#tb2 td { border: 5px dotted red; color: white; }

    <body>
  <table id="tb1">
    <tr>
      <th colspan="3">
        <h2>Fruit!</h2>
      </th>
    </tr>
    <tr>
      <th>Strangers</th>
      <th>Friends</th>
      <th>Family</th>
    </tr>
    <tr>
      <td>Lemon</td>
      <td>Pear</td>
      <td>Blueberry</td>
    </tr>
    <tr>
      <td>Plum</td>
      <td>Apple</td>
      <td>Strawberry</td>
    </tr>
  </table>
  <table id="tb2">
    <tr>
      <th colspan="3">
        <h2>Fruit!#2</h2>
      </th>
    </tr>
    <tr>
      <th>Strangers</th>
      <th>Friends</th>
      <th>Family</th>
    </tr>
    <tr>
      <td>Lemon</td>
      <td>Pear</td>
      <td>Blueberry</td>
    </tr>
    <tr>
      <td>Plum</td>
      <td>Apple</td>
      <td>Strawberry</td>
    </tr>
  </table>
</body>

【讨论】：

但是你可以看到我有两个不同的表名：一个是“tb1”，另一个是“tb2”。如果我只想更改“tb2”而不是“tb1”，我该怎么做？正如我的代码所述，我不想要绿色边框、黑色背景等，在这两个表上，我只想要它在“tb2”上。当我只想修改其中一个时，导致两者都改变外观的问题是什么？
正如我的回答所说，#tb2 只会选择“tb2”的 id。这不会选择不同的 id，在您的情况下为“tb1”。

【解决方案3】：

我总是更喜欢在 javascript 中使用 id，并使用类来制定样式。所以然后尝试使用 class="tb2" 而不是 id="tb2"。另外，我不确定您是否可以使用 #tb2 table 设置元素的样式，我认为您需要在其中省略一个或另一个。我试过这个：

<style type="text/css">
    .tb1  {border:10px solid green;}
    tr {background-color:black;}
    th {color:white;}
    td {border:5px dotted red;color:white;}
</style>
</head>
<body>
    <table class="tb1" border="5" 
    width="50%" height="200" cellpadding="10" cellspacing="3">
    <tr><th colspan="3"><h2>Fruit!</h2></th></tr>`

或者你也可以试试：

 <style type="text/css">
        #tb1  {border:10px solid green;}
        tr {background-color:black;}
        th {color:white;}
        td {border:5px dotted red;color:white;}
    </style>
</head>
<body>
    <table id="tb1" border="5" 
    width="50%" height="200" cellpadding="10" cellspacing="3">
    <tr><th colspan="3"><h2>Fruit!</h2></th></tr>

希望对您有所帮助！

【讨论】：

谢谢大家的超级快速回复！:) 不敢相信我这么瞎！但是，当我只参考其中一个时，我仍然不明白为什么这两个表都是样式：/ 有什么想法吗？
@Deezhan “当我只提到一个表格时，两个表格都是样式”是什么意思？
@Deezhan 现在只有tr、th 和tds 应该设置样式，10px 边框不会出现在任何一张桌子上，因为没有任何匹配的元素选择器。此外，tr、th 和 td 的 CSS 将影响这两个表，因为您没有在这些规则中指定要定位的表 ID。
它确实在其中一张桌子上显示了一个 10 像素的纯绿色边框，但在另一个已经有边框的桌子上没有。无论如何，在我设法阅读您的评论之前，我解决了这个谜。我“简单地”给了所有 tr's、th's、td's 一个 ID，并且它起作用了。
@Deezhan 你不需要这样做。问题是您使用的选择器特异性。例如，在样式规则tr {background-color:black;} 中，选择器是tr，它引用了所有表中的所有表行。如果您只想对表 2 中的表行进行样式设置，则应为选择器编写 #tb2 tr。这样，HTML 不需要更改。阅读选择器的特殊性。

【解决方案4】：

感谢大家的帮助！多亏了大家，拼图一点一点地解决了！这是我一直在寻找的最终结果：

<!doctype html>
<html>
    <head>
        <style type="text/css">
            #tb2 {border:10px solid green;}
            #tr2 {background-color:black;}
            #th2 {color:white;}
            #td2 {border:5px dotted red;color:white;}
        </style>
    </head>
    <body>
        <table id="tb1" border="5" 
        width="50%" height="200" cellpadding="10" cellspacing="3">
        <tr><th colspan="3"><h2>Fruit!</h2></th></tr>
        <tr>
            <th>Strangers</th>
            <th>Friends</th>
            <th>Family</th>
        </tr>
            <td>Lemon</td>
            <td>Pear</td>
            <td>Blueberry</td>
        </tr>
            <td>Plum</td>
            <td>Apple</td>
            <td>Strawberry</td>
        </tr>
        </table>
        <table id="tb2">
        <tr id="tr2"><th id="th2" colspan="3"><h2>Fruit!#2</h2></th></tr>
        <tr id="tr2">
            <th id="th2">Strangers</th>
            <th id="th2">Friends</th>
            <th id="th2">Family</th>
        </tr>
        <tr id="tr2">
            <td id="td2">Lemon</td>
            <td id="td2">Pear</td>
            <td id="td2">Blueberry</td>
        </tr>
        <tr id="tr2">
            <td id="td2">Plum</td>
            <td id="td2">Apple</td>
            <td id="td2">Strawberry</td>
        </tr>
        </table>
    </body>
</html>

【讨论】：