Использования мультипликатора «>» CSS селекторы

Question

Учитывая этот 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; 
} 

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

Answer 1

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

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>

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

Примера (примечание 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>

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

Тег используется для группы содержание тела в HTML-таблице.

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

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

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

more about tbody

Answer 3

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

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

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

Answer 4

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

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

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

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

More info about nth-child() here