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

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

table tr td

но этот не делает:

table > tr > td

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

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

  1. ребенок: http://jsfiddle.net/brLee/
  2. потомок:http://jsfiddle.net/brLee/1/

почему > селектор работает здесь?

34
css css-selectors html

2 ответов

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

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

table > tbody > tr > td

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

тег бездействие

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

1это не относится к документам XHTML, которые правильно обслуживаются как ,, учитывая его XML корни.

76

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

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

<PagerStyle CssClass="pagerNoBorder" />

)

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

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

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

1