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

136

Есть ли способ применить стиль класса только к ОДНОМУ уровню тэгов?

<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

Есть ли способ применить стиль класса только к ОДНОМУ уровню тэгов?

Да ^* :

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

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

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

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

— bobince
источник

1

Мне страшно вспомнить мир, в котором нам пришлось отлаживать IE6. Эта публикация принесла озноб ..

— webfish

35

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

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

— Авико Олоо
источник

16

Это не сработает. Это выбирает все tdдочерние .MyClassэлементы в дочернем дереве, которые являются первыми из их содержащего элемента, и, таким образом, также стилизует внутреннее td.

— Лазло

1

как это имеет так много голосов? :first-childопределенно не будет иметь эффекта, который ищет OP.

— plong0

8

Этот стиль:

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

дает мне:

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

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

— Ник преста
источник

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

— Томасруттер

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>

— prule
источник

3

Я думаю, это будет работать.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

— Ума
источник

Первый выбирает первый tdиз каждой строки, а второй только первый tdиз страниц?

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

@JoshuaPinter вы в основном правы насчет первого. В общем случае td:first-childвыбирает любой tdэлемент, который является первым элементом под его родителем (независимо от того, какой у него родитель). Первый tr td:first-childдобавляет условие, что он также tdдолжен быть вложен ниже a tr(на любом уровне, не обязательно прямой потомок). tr > td:first-childвыбирает тот, tdкоторый является первым элементом непосредственно под 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» - это селектор для родительского элемента вашей таблицы

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

— Саймон Бьюкен
источник