Question

我们说这是我的HTML代码：

<table>
   <tbody>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
      </tr>
      <tr>
         <td>4</td>
         <td>5</td>
         <td>6</td>
      </tr>
      <tr>
         <td>
            <table>
               <tbody>
                  <tr>
                     <td>A</td>
                     <td>B</td>
                     <td>C</td>
                  </tr>
                  <tr>
                     <td>D</td>
                     <td>E</td>
                     <td>F</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

我想只绘制内表（A，B，C，D，E，F）为红色（背景颜色：红色）

需要注意的重要事项 - 故意没有“class”或“id”！我想要一个没有它的解决方案......

Answer 1

＆＃13;

table table td {
background-color: red;
}

＆＃13;

<table>
   <tbody>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
      </tr>
      <tr>
         <td>4</td>
         <td>5</td>
         <td>6</td>
      </tr>
      <tr>
         <td>
            <table>
               <tbody>
                  <tr>
                     <td>A</td>
                     <td>B</td>
                     <td>C</td>
                  </tr>
                  <tr>
                     <td>D</td>
                     <td>E</td>
                     <td>F</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

＆＃13;

Answer 2

这个选择器基本上意味着：表内的表

＆＃13;

table table{
  background-color: red;
}

＆＃13;

<table>
   <tbody>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
      </tr>
      <tr>
         <td>4</td>
         <td>5</td>
         <td>6</td>
      </tr>
      <tr>
         <td>
            <table>
               <tbody>
                  <tr>
                     <td>A</td>
                     <td>B</td>
                     <td>C</td>
                  </tr>
                  <tr>
                     <td>D</td>
                     <td>E</td>
                     <td>F</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

＆＃13;

Answer 3

您可以使用table table { ... }。这应该只适用于嵌套在另一个表标记中的表。或者明确table > tbody > tr > td > table { ... }。

希望这有帮助，

克里斯。

Answer 4

使用选择器如：

table table {
    background-color: red;
}

翻译：表内表。

Answer 5

最初我误解了如何使用nth-child（）psudeo-class。我现在明白了。以下代码将按您的要求执行。

要获取内部表，您需要访问内部表行。实际上有其他方法可以使用第n个公式来做到这一点，但这是我能想到的最简单的方法。

3转换为初始表格标记内的第3个表格行。

table tr:nth-child(3){
    background: red;
}

https://jsfiddle.net/USERALPHA32/ufjqgewa/1/

这也将按照你的要求行事。这个小提琴与上面的小提琴之间的区别在于，这个小提琴将直接访问嵌套表https://jsfiddle.net/USERALPHA32/ufjqgewa/3/

table tr table:nth-child(1){
    background: red;
}

__________________________以上是正确的__________________________________

__________________________以下错误____________________________________

到达你要做的桌子内的桌子：

table:nth-child(2) {
    background: red;
}

我相信你可以使用nth-child选择器。虽然这可能会导致跨浏览器支持的问题。

https://www.sitepoint.com/web-foundations/nth-childn-css-selector/

如何仅在内部表上设置背景颜色

5 个答案: