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

У меня две таблицы, это только 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>

class html css parent-child styles
person Tugboat    schedule 27.05.2020    source источник

Ответы (3)


arrow_upward
0
arrow_downward

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

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

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

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

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

введите описание изображения здесь

For more info on CSS selectors, please refer to 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>

person yinsweet    schedule 27.05.2020
comment
Вау, это действительно интересно, как это работает ‹tbody›. Забавно, что вы поделились ссылкой на W3school, потому что до того, как я задал свой вопрос, я находился именно на той странице, пытаясь понять это; Так я пришел к своему ограниченному пониманию ссылки на родительские и дочерние элементы в стилях. Спасибо, yinsweet, код работает прекрасно, и я с нетерпением жду возможности попробовать что-то новое с этими новыми знаниями! - person Tugboat; 27.05.2020

arrow_upward
0
arrow_downward

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

person Milo Todt    schedule 27.05.2020
comment
Реляционный селектор основан на классе, уникальном для этой таблицы. Я просто хотел, чтобы мой код был эффективным, поэтому я не создавал идентификатор для каждого элемента. Спасибо, что ответил и поделился своей мудростью, Майло! Я ценю обратную связь. - person Tugboat; 27.05.2020

arrow_upward
0
arrow_downward

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

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

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

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

person Jack Parkinson    schedule 27.05.2020
comment
Спасибо за то, что поделились своим опытом и добавили ссылку, чтобы я мог продолжить изучение этой темы! Я явно новичок и очень ценю помощь. - person Tugboat; 27.05.2020