select 父元素中的所有元素 class

Question

我有两个table，这只是第二个。我想在不影响第一个 table 的情况下设置第二个 table 的样式。我也不想为每个标签标识或创建类。 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>

Answer 1

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

Answer 2

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

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

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

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

Answer 3

.t2 > tbody 选择 <tbody> 元素，其中父元素是 .t2 class 元素。

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>

select 父元素中的所有元素 class

select all elements within a parent class

html

css

styles

class

parent-child