选择父类中的所有元素答案

【问题标题】：select all elements within a parent class选择父类中的所有元素
【发布时间】：2020-09-13 22:38:06
【问题描述】：

我有两张桌子，这只是第二张。我想在不影响第一张桌子的情况下设计第二张桌子。我也不想为每个标签标识或创建类。 Visual Studio 似乎明白我告诉它做什么，但它没有翻译到网页上。我错过了什么？

<style>
    .t2 > tr th td{
                   border: 1px solid white;
               }
    </style>

    <table class="t2">
            <tr>
                <th>Column 1</th>

            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>

            </tr>


        </table>

【问题讨论】：

标签： html css class styles parent-child

【解决方案1】：

.t2 > tbody 选择父元素是.t2 类元素的<tbody> 元素。

tbody > tr 选择父元素为<tbody> 元素的所有<tr> 元素。

tr > th 选择父元素为<tr> 元素的所有<th> 元素。

tr > td 选择父元素为<tr> 元素的所有<td> 元素。

虽然你没有明确编码<tbody>，但是浏览器在显示的时候会加上<tbody>。

有关 CSS 选择器的更多信息，请参阅here。

<style>
  body {
    background-color: skyblue;
  }
  
  .t2 > tbody > tr > th,
  .t2 > tbody > tr > td {
    border: 1px solid white;
  }
</style>

<table class="t2">
  <tr>
    <th>Column 1</th>

  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>

  </tr>


</table>

【讨论】：

哇，这真的很有趣。有趣的是，您分享了 W3school 的链接，因为在我问我的问题之前，我就在那个确切的页面上试图弄清楚这一点；这就是我对在样式中引用父元素和子元素的有限理解的原因。谢谢 yinsweet，代码运行良好，我期待用这些新知识尝试新事物！

【解决方案2】：

强烈建议不要使用关系选择器（依赖于页面元素顺序的选择器），因为它们很容易被布局更改或添加新页面元素破坏。您想要添加唯一 ID 或自定义类，以便将来的更改不会破坏您之前的工作。

【讨论】：

关系选择器基于该表唯一的类。我只是想提高我的代码效率，所以我没有为每个元素创建一个 id。感谢您回复并提供您的智慧米洛！感谢您的反馈。

【解决方案3】：

据我所知，tr 在不使用边框折叠的情况下不会采用边框样式。见这里：Why TR not taking style?

此外，CSS 中的> 选择器仅适用于指示样式的立即子级。由于td 和th 是tr 元素的子元素，因此它们不会被拾取。您可能想使用：

.t2 td, th{
  border: 1px solid white;
}

相反，它也应该将样式应用于.t2 的嵌套子级。

【讨论】：

感谢您分享您的经验并添加链接，这样我就可以继续自学该主题！我显然是新手，非常感谢您的帮助。