выбрать все элементы в родительском классе

Question

У меня две таблицы, это только 2-я. Я хочу стилизовать вторую таблицу, не затрагивая первую таблицу. Я также не хочу указывать или создавать классы для каждого тега. 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

Насколько мне известно, tr не принимает стили границ без использования сворачивания границ. См. Здесь: Почему TR не принимает стиль?

Кроме того, селектор > в CSS применяется только к непосредственным дочерним элементам указанного стиля. Поскольку td и th являются дочерними элементами элемента tr, они не обрабатываются. Вместо этого вы можете использовать:

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

, что должно применить стиль и к вложенным дочерним элементам .t2.

Answer 2

.t2 > tbody выбирает элементы <tbody>, родительский элемент которых является элементом класса .t2.

tbody > tr выбирает все элементы <tr>, где родительский элемент является элементом <tbody>.

tr > th выбирает все элементы <th>, где родительский элемент - <tr>.

tr > td выбирает все <td> элементы, у которых родительский элемент <tr>.

Хотя вы не указали код <tbody> явно, браузер добавит <tbody> при его отображении.

Для получения дополнительной информации на селекторах CSS см. здесь .

<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>

Answer 3

Использование реляционных селекторов (те, которые зависят от порядка элементов на странице) крайне не рекомендуется, поскольку они легко нарушаются изменениями в макете или добавлением новых элементов страницы. Вы хотите добавить уникальный идентификатор или собственный класс, чтобы будущие изменения не нарушили вашу предыдущую работу.