Использование нескольких ">" селекторов CSS

Учитывая этот html:

<table id="my-table">
  <tr>
    <td>
       I want to apply my style to this
    </td>
    <td>
      <table>
        <tr>
          <td>
            But not to this
          </td>
        </tr>
      </table>  
    </td>
  </tr>
</table>

Я хотел бы применить стиль к ячейкам, которые являются дочерними элементами первого уровня таблицы.

Я думал, что могу использовать это:

#my-table > tr > td {
    color: #ff0000;
}

... Но это не сработает. Это потому, что вы не можете использовать несколько селекторов >? Как я могу это сделать?

Ответ 1

Существует два аспекта:

В браузере будет добавлен элемент tbody, если вы не включите его (или, по крайней мере, чаще всего, большую часть времени), я всегда использую явный, поэтому я не знаю края случаев), и поэтому даже если вы не используете его в своем HTML-коде, вам понадобится его в селекторе, если вы используете > (дочерний комбинатор). Это изменит ваш селектор на #my-table > tbody > tr > td. (Я всегда защищаю, в том числе tbody явно в HTML, просто чтобы избежать путаницы и случаев краев.)
Таблица внутри td наследует свой цвет от td внутри. Поэтому, хотя ваш селектор нацелен на правильные элементы, их элементы-потомки наследуют цвет.

Вы можете обойти это, указав явный цвет элементам #my-table td, а затем специальный цвет только для элементов #my-table > tbody > tr > td.

Пример (обратите внимание на tbody в HTML, а также в селекторе):

#my-table td {
  color: black;
}
#my-table > tbody > tr > td {
  color: #ff0000;
}

<table id="my-table">
  <tbody>
    <tr>
      <td>
        I want to apply my style to this
      </td>
      <td>
        <table>
          <tr>
            <td>
              But not to this
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Ответ 2

Привет, вы можете попробовать таким образом

#my-table > tbody> tr > td {
    color: #ff0000;
}
#my-table td{color:#000;}

<table id="my-table"><tbody>
  <tr>
    <td>
       I want to apply my style to this
    </td>
    <td>
      <table><tbody>
        <tr>
          <td>
            But not to this
          </td>
        </tr></tbody>
      </table>  
    </td>
  </tr></tbody>
</table>

Ответ 3

Насколько мне известно, вам нужен и первый ребенок, иначе вы будете использовать последний TD, если хотите его:

	#my-table > tbody > tr > td:first-child  {
			color: #ff0000;
			border: 1px solid black;
		}

<table id="my-table">
  <tr>
    <td>
      I want to apply my style to this
    </td>
    <td>
      <table>
        <tr>
          <td>
            But not to this
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Ответ 4

color обладает тем свойством, что оно применяется ко всем его дочерним элементам. Поэтому вам нужно будет ограничить это. Вы можете сделать это с помощью > и :nth-child(n)

#my-table > tbody > tr > td:nth-child(1) {
    color: #ff0000;
}

Ваш HTML должен иметь tbody, но это может быть необязательно, браузеры создадут их для вас, но он рекомендовал использовать tbody самостоятельно.

Вы можете изменить это, если ваши таблицы становятся больше.. например, с использованием таких формул, как 3n+1, odd/even и т.д. Кроме того, вы можете использовать несколько пробелов или > и теги элементов, чтобы указать все ваши потребности. В зависимости от того, что вы хотите.

Подробнее о nth-child() здесь