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

есть ли способ применить стиль класса только к одному уровню тегов 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>
110
css css-selectors

7 ответов

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

да*:

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

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

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

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

187

Как насчет использования CSS: псевдо-класса первого ребенка:

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

этого стиля:

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

дает мне:

это http://img12.imageshack.us/img12/4477/borders.png

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

8

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

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

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

6

Я хотел установить ширину первого столбца таблицы, и я нашел, что это сработало (в FF7) - первый столбец имеет ширину 50px:

#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 { }
3

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

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

или

body table tr td { color: red; }

где "тело" - селектор для родителя вашей таблицы

но классы, скорее всего, правильный путь, чтобы пойти здесь.

2