Почему таблицa> tr> td не работает при использовании дочернего селектора?

Я не могу понять, почему следующий селектор работает как ожидалось (т.е. получите td):

table tr td

но этого нет:

table > tr > td

td является потомком tr, который, в свою очередь, является потомком table, но они также являются дочерними элементами друг друга. Поэтому я думал, что селектор > тоже будет работать.

Я сделал две скрипки:

Почему не работает селектор >?

Ответы

Ответ 1

В HTML браузеры неявно добавляют элемент tbody, в котором содержатся элементы tr 1 поэтому на самом деле tr никогда не является дочерним элементом table.

Следовательно, вы должны сделать это вместо этого:

table > tbody > tr > td

Конечно, если вы добавите элемент tbody самостоятельно, вы будете использовать тот же селектор. spec объясняет, когда tbody добавляется неявно в противном случае:

Недействительность тегов

A tbody тег начала элемента может быть опущен, если первое, что внутри элемента tbody является элементом tr, и если элементу сразу не предшествует элемент tbody thead или tfoot end tag был опущен.

1 Это не относится к документам XHTML, которые должным образом обслуживаются как application/xhtml+xml, однако с учетом его корней XML.суб >

Ответ 2

Если вы хотите быть более католическим, чем папа:) вот что я сделал (потому что ни одно из вышеперечисленных не работало для меня):

1) Создайте класс css, назначьте его свойству GridView (например:

<PagerStyle CssClass="pagerNoBorder" />

)

2) Определите класс css так же, как номера страниц отображаются вашим браузером (проверьте элемент в браузере и найдите все дочерние селекторы!). В моем случае это была ситуация:

.pagerNoBorder > td > table > tbody > tr > td
    {
        border-width:0px !important;
        border-style:none;
    }

Если вы скажете, почему граница ширины (+! important) и border-style в одно и то же время, то снова прочитайте ввод моего ответа:). Приветствия и хороший день!