Question

我正在为表格中有两行（有很多标签）的标签编码css。我想为它们设置背景颜色，

这是HTML：

<table>

    <!--profile-->
    <tr><td colspan="3">profile</td></tr>

    <!--tabs 2 rows-->
    <div class="tab_links">
    <!--row 1-->
    <tr>
        <td class="active"><a href="#tab1">tab1</a></td>
        <td><a href="#tab2">tab2</a></td>
        <td><a href="#tab3">tab3</a></td>
    </tr>
    <!--row 2-->
    <tr>
        <td><a href="#tab4">tab4</a></td>
        <td><a href="#tab5">tab5</a></td>
        <td><a href="#tab6">tab6</a></td>
    </tr>
    </div>

    <!--detail of tab-->
    <tr><td colspan="3">detail of tab</td></tr>

</table>

我尝试编写CSS代码，但它不起作用。

这是CSS：

.tab_links td {
    background:#7fb5da;
}

谢谢

Answer 1

您的样式未应用的原因之一是因为您提供的选择器.tab_links td永远不会与文档匹配。这是因为，当构建DOM（文档对象模型）时，浏览器不会维护无效的HTML，它会尝试“拯救”。它。这是一个功能，而不是一个bug。例如，以下（缩写为无效）HTML：

<table>
    <div class="tab_links">
    <!--row 1-->
    <tr>
        <td class="active"><a href="#tab1">tab1</a></td>
        <td><a href="#tab2">tab2</a></td>
        <td><a href="#tab3">tab3</a></td>
    </tr>
    <!--row 2-->
    <tr>
        <td><a href="#tab4">tab4</a></td>
        <td><a href="#tab5">tab5</a></td>
        <td><a href="#tab6">tab6</a></td>
    </tr>
    </div>
</table>

在构建DOM时，将（在Chrome 40.x / Windows 8.1中测试）转换为：

<div class="tab_links">
    <!--row 1-->
</div>
<table>
    <tbody>
        <tr>
            <td class="active"><a href="#tab1">tab1</a>    
            </td>
            <td><a href="#tab2">tab2</a>    
            </td>
            <td><a href="#tab3">tab3</a>    
            </td>
        </tr>
        <!--row 2-->
        <tr>
            <td><a href="#tab4">tab4</a>    
            </td>
            <td><a href="#tab5">tab5</a>    
            </td>
            <td><a href="#tab6">tab6</a>    
            </td>
        </tr>
    </tbody>
</table>

请注意，<div>元素现在位于<table>之前？此外，浏览器添加（技术上）可选的<tbody>元素来包装<tr>元素;但那并不是非常重要。

所以：问题变成了<div>处于错误的地方;要直接嵌套在<table>元素中的仅有效元素包括：<tbody>，<thead>，<tfoot>和<tr> ¹

我建议的解决方案，因为您似乎想要将多个<tr>元素组合在一起，就是用<tbody>包装这些元素，并指定相关的类名那个元素，类似地，但在语义上，将它们组合在一起：

<table>
    <tbody class="tab_links">
        <tr>
            <td class="active"><a href="#tab1">tab1</a>    
            </td>
            <td><a href="#tab2">tab2</a>    
            </td>
            <td><a href="#tab3">tab3</a>    
            </td>
        </tr>
        <!--row 2-->
        <tr>
            <td><a href="#tab4">tab4</a>    
            </td>
            <td><a href="#tab5">tab5</a>    
            </td>
            <td><a href="#tab6">tab6</a>
            </td>
        </tr>
    </tbody>
</table>

＆＃13;

.tab_links td {
  color: #fff;
  background-color: #66f;
}
a {
  color: inherit;
}

＆＃13;

<table>
  <tbody class="tab_links">
    <tr>
      <td class="active"><a href="#tab1">tab1</a> 
      </td>
      <td><a href="#tab2">tab2</a> 
      </td>
      <td><a href="#tab3">tab3</a> 
      </td>
    </tr>
    <!--row 2-->
    <tr>
      <td><a href="#tab4">tab4</a> 
      </td>
      <td><a href="#tab5">tab5</a> 
      </td>
      <td><a href="#tab6">tab6</a>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

参考文献：

如上所示，浏览器会忽略这一点，并将<tbody>包裹在<tr>元素周围，如果它们尚未存在。

Answer 2

请删除<div class="tab_links">并将此类添加到表中然后它将起作用感谢

Answer 3

将该类添加到<tr>并删除div：

<table>
    <!--profile-->
    <tr><td colspan="3">profile</td></tr>
    <!--tabs 2 rows-->
    <!--row 1-->
    <tr class="tab_links">
        <td class="active"><a href="#tab1">tab1</a></td>
        <td><a href="#tab2">tab2</a></td>
        <td><a href="#tab3">tab3</a></td>
    </tr>
    <!--row 2-->
    <tr class="tab_links">
        <td><a href="#tab4">tab4</a></td>
        <td><a href="#tab5">tab5</a></td>
        <td><a href="#tab6">tab6</a></td>
    </tr>
    <!--detail of tab-->
    <tr><td colspan="3">detail of tab</td></tr>

</table>

演示： http://jsfiddle.net/trex005/2L7d86p2/

Answer 4

编辑背景：＃7fb5da;背景颜色：＃7fb5da;

如何在CSS中设置td的背景颜色

4 个答案: