Попытка стилизовать первое тело, отличное от других, без введения другого класса - PullRequest
Новая
       2

Попытка стилизовать первое тело, отличное от других, без введения другого класса

3 голосов
/ 02 июня 2010

У меня есть таблица с несколькими tbody, у каждой из которых есть классифицированная строка, и я хочу, чтобы классифицированная строка в первом tbody имела различия в стиле, но я не могу заставить tbody: first-child работать в любом браузер. Возможно, я что-то упустил, или, может быть, есть обходной путь.

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

HTML-код прост: 

<tbody class="subGroup">
    <tr class="subGroupHeader">
        <th colspan="8">All Grades: Special Education</th>
        <td class="grid" colspan="2"><!-- contains AMO line --></td>
        <td><!-- right 100 --></td>
    </tr>
    <tr>...</tr> <!-- several more rows of data -->
</tbody>

В таблице несколько человек. Я хочу стилизовать th и td в tr.subGroupHeader в самом первом tbody иначе, чем в остальных. Просто чтобы проиллюстрировать это, я хочу добавить верхнюю границу в ячейки tr.subGroupHeader.

Стиль tr.subGroupHeader будет иметь верхнюю границу, например: 

table.databargraph.continued tr.subGroupHeader th, table.databargraph.continued  tr.subGroupHeader td {
    border-top: 6px solid red;
}

Для первого человека я пытаюсь: 

table.databargraph.continued tbody:first-child tr.subGroupHeader th {
    border-top: 6px solid blue ;
}

Однако, похоже, это не работает ни в одном браузере (я тестировал в Safari, Opera, Firefox и PrinceXML, все на моем Mac)

Любопытно, что обычно превосходный инструмент Xyle Scope указывает, что синяя рамка должна иметь приоритет, хотя, очевидно, это не так. Смотрите скриншот на http://s3.amazonaws.com/ember/kUD8DHrz06xowTBK3qpB2biPJrLWTZCP_o.png

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

Возможно, я упускаю что-то фундаментальное, например, псевдоклассы, которые вообще не работают для tbodys ... Это действительно нужно для работы только в PrinceXML и, возможно, в Safari, чтобы я мог видеть, что я делаю, с помощью инструментов CSS на основе webkit. .

Обратите внимание, что я попробовал селектор, подобный tr.subGroupHeader: first-child, но такие tr, очевидно, считают tbody родительским (как я подозреваю), таким образом, каждая рамка становится синей.

Спасибо ...

Ответы [ 2 ]

1 голос
/ 10 июня 2010

Извините, ребята, но я отвечу на свой вопрос. Но я ценю помощь.

Вместо: 

table.databargraph.continued tbody:first-child tr.subGroupHeader th {
    border-top: 6px solid blue ;
}

То, что я должен был сделать, было: 

table.databargraph.continued > tbody:first-of-type tr.subGroupHeader th {
    border-top: 2px solid blue !important ; 
}
1 голос
/ 02 июня 2010

Является ли tbody первым ребенком в таблице? Если есть какой-либо другой элемент, который является более ранним братом (например, thead?), Это не будет работать.

Я пробовал следующий тестовый код, и он, кажется, работает: 

<html>
    <head>
        <style type="text/css">
        table tbody tr th {
            border-top: 6px solid red;
        }
        table tbody:first-child tr th {
            border-top: 6px solid blue;
        }
        </style>
    </head>
    <body>
    <table>
    <tbody>
        <tr><th colspan="2">Title</th></tr>
        <tr><td>Data</td><td>Data</td></tr>
    </tbody>
    <tbody>
        <tr><th colspan="2">Title</th></tr>
        <tr><td>Data</td><td>Data</td></tr>
    </tbody>
    <tbody>
        <tr><th colspan="2">Title</th></tr>
        <tr><td>Data</td><td>Data</td></tr>
    </tbody>
    </table>
</body>
</html>

При добавлении элемента thead это перестает работать, потому что нет tbody, который является первым дочерним элементом таблицы. Кажется, что работает в этом случае (по крайней мере, в Opera) следующее: 

table thead + tbody tr th {
    border-top: 6px solid blue;
}

Это выбирает всех, кто непосредственно следует за тобой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...