Применить стиль только к первому уровню тд-тегов

Ответ 1

Есть ли способ применить стиль класса только к одному типу td-тегов?

Да ^*

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

Но! Селектор direct-child > не работает в IE6. Если вам нужно поддерживать этот браузер (что вы, вероятно, делаете, увы), все, что вы можете сделать, это выбрать внутренний элемент отдельно и не устанавливать стиль:

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

^* Обратите внимание, что первый пример ссылается на элемент tbody, который не найден в вашем HTML. Это должно было быть в вашем HTML, но браузеры, как правило, в порядке, оставив его... они просто добавляют его за кулисами.

Ответ 2

как насчет использования CSS: first-child псевдокласс:

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

Ответ 3

Этот стиль:

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

дает мне:

this http://img12.imageshack.us/img12/4477/borders.png

Однако использование класса, вероятно, является правильным подходом.

Ответ 4

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

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

(Для общего применения ко всем внутренним таблицам вы также можете сделать table table td.)

Ответ 5

Думаю, это сработает.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

Ответ 6

Я хотел установить ширину первого столбца таблицы, и я нашел, что это сработало (в 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>

Ответ 7

Думаю, вы могли попробовать

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

или

body table tr td { color: red; }

где 'body' - это селектор для родительской таблицы

Но классы, скорее всего, верный путь.