Стиль, использующий nth-child, чтобы обновлять аспект таблицы (чередующиеся цвета строк)

У меня есть таблица CSS, как это:

(это надежное упрощение моей системы)

<div class="table">
    <div class="row">
        <div class="data">
        abc
        </div>
    </div>
    <div class="row">
        <div class="data">
        def
        </div>
    </div>
    <div class="row">
        <div class="data">
        ghi
        </div>
    </div>
    <div class="row">
        <div class="data">
        jkl
        </div>
    </div>
</div>

И у меня есть CSS, как это:

div.table div.row:not(.hide):nth-child(2n){
    background-color: #D7D4DA;
}
div.table div.row:not(.hide):nth-child(2n+1){
    background-color: #E4E8EB;
}

.hide{
    display:none;
}

Цель состоит в следующем: когда линия скрыта (с использованием класса hide), стилизация таблицы должна оставаться прежней (каждая строка имеет различный цвет между двумя доступными). Вместо этого это сломано.

Согласно Firebox Firebox,:nth-child применяется до:notне после (как я хотел). Как это можно решить?

Примечание: изменение HTML не требуется. Это что-то динамически сделано с использованием JavaScript.

Моя цель не состоит в том, чтобы подсчитывать для n-го потомка строки, которые скрыты, чтобы поддерживать стиль, даже если линия не видна

 BoltClock♦09 февр. 2012 г., 19:18
Вы не можете изменить порядок оценки псевдоклассов. Все в составном селекторе оценивается «одновременно» для любого данного элемента. Видетьэтот ответ для объяснения. Кроме того, я сожалею, что вам придется мириться со сценарием, который выводит таблицу CSS, которая явно должна была быть таблицей HTML.
 elclanrs09 февр. 2012 г., 19:16
Я видел, как вы отправили этот вопрос на днях, и я не мог понять это. Вы можете использовать javascript / jquery для этого.
 Deadlykipper16 февр. 2012 г., 11:29
Можете ли вы добавить в CSS, чтобы это выглядело как таблица, которую вы хотите, чтобы мы могли тратить время на работу над проблемой, а не на основной макет. ура
 brunoais09 февр. 2012 г., 19:42
@ BoltClock ♦ спасибо, чувак. Похоже, мне придется мириться с использованием классов, чтобы пометить узлы двумя цветами, и использовать js, чтобы изменить классы, когда линия скрыта. Спасибо (снова).
 brunoais16 февр. 2012 г., 16:41
Там нет решения CSS. CSS не готов иметь дело с этой конкретной ситуацией. Единственный способ обойти это использование JavaScript. Я использую это с nth-child, а затем переопределяю с помощью js, когда есть скрытые вещи

Ответы на вопрос(1)

Чистый ответ CSS (CSS3)

которые следует принять во внимание (см. Ниже), нокажется, есть способ сделать это в чистом CSS (обратите внимание, что скрипка использует фальшивкуdiv таблицы в этом посте, но это может быть сделано с реальными таблицами HTML), используяlinear-gradient с цветными остановками (найдена техникаВот) наtable фон. Ключ, чтобы сделать его гибким сfont-size изменения (или масштабирование), чтобы установить часть высотыbackground-size в два разаline-height установить для строк.

Соображения:

line-height а такжеfont-size заrow должен быть явно установлен сem единиц (кроме см. примечание № 5 ниже).Еслиpadding установлен наtable (не рекомендуется), затем какой-либо тип корректировкиbackground-position или жеbackground-clip Скорее всего, нужно будет сделать, чтобы разместить отступы.Если сверху или снизуpadding или жеmargin установлен наrow тогда это должно быть вem единицы и добавлены кline-height значение до расчета в два разаlinear-gradient высота.Эта техника изменит цвет фонав ряд если в этой строке несколько строк (видетьпоследний стол в моем примере скрипка).Если какой-либо другой элемент с фиксированной высотой находился в строках (изображения имеют высоту 20 пикселей), тоrow высота иlinear-gradient высота может быть установлена на основе значений пикселей.

Я не потратил время на то, чтобы поиграться с № 2 и № 3 выше, чтобы точно определить, какие именно корректировки необходимы, но теоретически должно быть возможно приспособить эти вещи при необходимости.

 BoltClock♦03 мар. 2012 г., 18:22
Скрипка с 140 ревизиями. Вы были заняты!
 ScottS03 мар. 2012 г., 18:39
@ BoltClock - Ницца (информация о CSS4 и upvote). Я пытался с помощью.hide:nth-of-type чтобы рассчитывать на.hide элементы, только чтобы выяснить, что это не работает таким образом (хотя, на мой взгляд, это должно), и вместо этого выглядело как типdiv, Если бы я мог понять, как считать.hide только элементы (с CSS и выбрав это), я думаю, я мог бы сделать рабочее решение на основеnth-child.
 BoltClock♦03 мар. 2012 г., 18:30
Да, вы не будете очень далеко с:nth-child() как только вы начнете смешивать их, потому что это просто не предназначено для обработки такого рода динамизм (хотя с:nth-match() в CSS4 это может быть так же просто, как.row:nth-match(2n of :not(.hide)) а также.row:nth-match(2n+1 of :not(.hide))). Между тем с помощью CSS3 получается, что линейные градиенты с жестким цветом останавливаютсянаходятся отлично подходит для полосатых узоров, если поддержка предыдущих версий не имеет первостепенного значения, поэтому вы можете проголосовать за меня :)
 BoltClock♦03 мар. 2012 г., 18:42
:nth-of-type() не смотрит на классысмотрит только на типы (div, tdи т. д.), так что тоже нет. Одна из причин, почему они предложили:nth-match().
 ScottS03 мар. 2012 г., 18:25
@ BoltClock - да, слишком много времени на это точно. Я думал, что у меня былnth-child Решение, пока я не проверил его со смешанными типами шкур вjsfiddle.net/yjkLT/67 (обратите внимание, что все столы были хорошими до двух последних).

Ваш ответ на вопрос