Я улучшал код, который преобразовывает XML в HTML. Существует рекурсивный метод, который генерирует таблицу.

Я хочу, чтобы каждый уровень был разным. Поэтому я установил стиль для трех уровней и повторяю их, если рекурсия глубже (уровень% 3).

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

http://jsbin.com/lexumogafe

sample

<html>
<head><style>
    table { border-collapse: collapse; }
    table, th, td { border: 1px solid black; }
    th, td { padding: 10px; }
    table.level_1 td { border-color: green; }
    table.level_2 td { border-color: blue; }
    table.level_3 td { border-color: red; }
</style></head>
<body>
    <table class='rule level_1'>
    <tr class="all">
        <td>XX</td>
        <td>
            <table class='rule level_2'>
            <tr class="all">
                <td>YY</td>
                <td>
                    <table class='rule level_3'>
                    <tr class="all">
                        <td>ZZ</td>
                        <td>
                            <table class='rule level_1'>
                            <tr class="all">
                                <td>ZZ</td>
                            </tr>
                            </table>
                        </td>
                    </tr>
                    </table>
                </td>
            </tr>
            </table>
        </td>
    </tr>
    </table>
</body>
</html>
0
Leos Literak 5 Апр 2017 в 12:27

2 ответа

Лучший ответ

Вы можете сделать стили специфичными для фактических td с помощью прямого дочернего селектора:

table.level_1 > tbody > tr > td { border-color: green; }
table.level_2 > tbody > tr > td { border-color: blue; }
table.level_3 > tbody > tr > td { border-color: red; }

Обновленный бен

4
Pete 5 Апр 2017 в 09:32

Использовать родительские отношения css как

table > table > td
{
border-collapse: collapse;
}

Таким образом, свойство css будет применяться только к дочернему элементу, а не к элементам-братьям.

-2
D. Pachauri 5 Апр 2017 в 09:32