Использование нескольких селекторов 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;
}

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

10
css html

4 ответов

есть два аспекта того, что происходит:

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

  2. внутрь 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>

в комментарии Вы сказали, что не контролируете внутреннюю таблицу. Если вы контролируете внешний таблица, вы можете решить эту проблему, просто поместив класс в ячейки, к которым вы хотите применить правило, а затем применить правило только к tds с этим классом:

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

#my-table > tbody > tr > td.first {
  color: #ff0000;
}
<table id="my-table">
  <tbody>
    <tr>
      <td class="first">
        I want to apply my style to this
      </td>
      <td>
        <table>
          <tr>
            <td>
              But not to this
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>
18

Привет теперь вы можете попробовать этот способ 

#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>

тег используется для группировки содержимого тела в таблице HTML.

элемент используется в сочетании с и элементы для указания каждой части таблицы (тело, заголовок, футбол.)

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

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

подробнее о tbody

2

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

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

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

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

больше информации о nth-child() здесь

2

насколько я вижу, вам нужен: first-child, иначе вы все еще нажимаете последний 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>
2