CSS селекторы - первый h2 в таблице

Question

Я пытаюсь выбрать первый h2 в этой таблице (который называется «стиль»), но действительно изо всех сил.Я пробовал nth-of-type и first-type.

Может кто-нибудь показать мне, что я делаю неправильно / отредактировать мою скрипку.

http://jsfiddle.net/SparrwHawk/JxZ6Y/

Answer 1

Селектор :nth-of-type(1) соответствует каждому элементу, который является первым дочерним элементом определенного типа его родителя.Все ваши h2 являются первыми дочерними по отношению к его родителю (a td).

Если это <h2> отличается семантически (и, конечно, если вы хотите, чтобы его стиль был другим), вы должны добавитькласс (<h2 class="its-semantic">) и выберите его через класс: table h2.its-semantic

Answer 2

table tr:first-child td:first-child h2{font-weight:bold}

Answer 3

Вы можете выбрать элемент h2 в первом элементе tr вашей таблицы

table tr:first-child h2

Я предполагаю, что вы не ориентируетесь на IE8 или более раннюю версию, потому что nth-child () поддерживается только в IE9.: first-child аналогичным образом поддерживается в IE9 и в некоторой степени в IE8.http://www.quirksmode.org/css/contents.html

Answer 4

table tr:first-child h2 {}

Это должно сделать это, вместо использования селектора на h2, используйте его, чтобы найти вместо него первый <tr> и применить стили к <h2> внутри этого <tr>

Смотрите обновленный jsFiddle:)

http://jsfiddle.net/JxZ6Y/4/

Answer 5

Вы можете определить уникальный идентификатор (#) или класс (.) Для этого h2

<h2 class="target"> Styling </h2>

Тогда вы можете выбрать его из css:

h2.target { color: organge; font-size: 200px;} //You can either use h2.target or .target both works

http://jsfiddle.net/SparrwHawk/JxZ6Y/

Я отредактировал и увеличил размер шрифта, чтобы вы могли увидеть разницу.

РЕДАКТИРОВАТЬ: ================================================ =====================

Хорошо, вот решение с использованием селекторов CSS.

table tbody tr:nth-child(1) > td h2 { color:grey; font-size: 100px;}

Добавьте этот код строки вверху, и он будет специально нацелен только на ваш первый h2

Вот что говорит код:

Target Table и перейти к tbody, а внутри tbody нацелиться на 1-го tr с помощью nth-child (1), затем нацелиться на td и затем перейти к h2

В качестве альтернативы вы можете даже сделать это: table tbody tr:nth-child(1) td:first-child { color:grey; font-size: 100px;}

Код в значительной степени аналогичен приведенному выше коду, который я написал для вас, за исключением удаления свойства h2 и first-child для td.