Застосовуйте стиль лише до першого тегу td

136

Чи є спосіб застосувати стиль класу лише до одного рівня тегів td?

<style>.MyClass td {border: solid 1px red;}</style>

<table class="MyClass">
  <tr>
    <td>
      THIS SHOULD HAVE RED BORDERS
    </td>
    <td>
      THIS SHOULD HAVE RED BORDERS
      <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
    </td>
  </tr>
</table>

css css-selectors

— RichC
джерело

221

Чи є спосіб застосувати стиль класу лише до одного рівня тегів td?

Так ^* :

.MyClass>tbody>tr>td { border: solid 1px red; }

Але! « >» Селектор прямого дитини не працює в IE6. Якщо вам потрібно підтримати цей веб-переглядач (що, напевно, ви робите, на жаль), все, що ви можете зробити, це вибрати окремий внутрішній елемент та скасувати встановлення стилю:

.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }

^* Зауважте, що перший приклад посилається на tbodyелемент, який не знайдено у вашому HTML. Це повинно бути у вашому HTML, але браузери, як правило, нормально, не залишаючи його ... вони просто додають його за кадром.

— бобінець
джерело

1

я здригнувся згадати світ, де нам довелося налагоджувати IE6. Ця публікація принесла озноб ..

— webfish

35

як щодо використання CSS: псевдоклас першого віку:

.MyClass td:first-child { border: solid 1px red; }

— aviko oloo
джерело

16

Це не спрацює. Це вибирає всіх tdдітей, на дитячому дереві .MyClassяких спочатку міститься елемент, і, таким чином, також буде стиль внутрішнього td.

— Лазло

1

як це має стільки результатів? :first-childточно не матиме ефекту, який шукає ОП.

— plong0

8

Цей стиль:

table tr td { border: 1px solid red; }
td table tr td { border: none; }

дає мені:

це http://img12.imageshack.us/img12/4477/borders.png

Однак використання класу, мабуть, тут є правильним підходом.

— Нік Преста
джерело

Використання класу для кожного елемента td може бути трохи зайвим, ви, ймовірно, будете використовувати клас для елемента, що містить таблицю, і тоді вам все одно доведеться виключати таблиці другого рівня - тобто ваш перший приклад правильний.

— thomasrutter

6

Просто зробіть селектор для таблиць всередині MyClass.

.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}

(Щоб загалом застосувати всі внутрішні таблиці, ви також можете це зробити table table td.)

— Чак
джерело

3

Я хотів встановити ширину першого стовпця таблиці, і я виявив, що це спрацювало (у FF7) - перший стовпець шириною 50 пікселів:

#MyTable>thead>tr>th:first-child { width:50px;}

де була моя розмітка

<table id="MyTable">
 <thead>
  <tr>
   <th scope="col">Col1</th>
   <th scope="col">Col2</th>
  </tr>
 </thead>
 <tbody>
   ...
 </tbody>
</table>

— вереск
джерело

3

Я думаю, це спрацює.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

— ума
джерело

Чи вибирає перший перший tdу кожному рядку, а другий вибирає лише перше tdна сторінці?

— Джошуа Пінтер

@JoshuaPinter в основному ви правильні щодо першого. Загалом, td:first-childвибирає будь-який tdелемент, який є першим елементом під його батьківським (незалежно від того, яким є його батько). Перший tr td:first-childдодає умову, що також tdмає бути вкладене нижче tr(на будь-якому рівні, не обов'язково прямому нащадку). tr > td:first-childвибирає a, tdщо є першим елементом безпосередньо під a tr. Отже, в кінцевому рахунку не :first-childмає нічого спільного з вирішенням питання ОП, і ця відповідь є невірною.

— plong0

2

Я думаю, ви могли б спробувати

table tr td { color: red; }
table tr td table tr td { color: black; }

Або

body table tr td { color: red; }

де "body" - це селектор для батька вашого столу

Але заняття, швидше за все, це правильний шлях сюди.

— Саймон Бучан
джерело