10

Вопрос по css – Возможны ли альтернативные вложенные стили в CSS?

Я провожу небольшой эксперимент, пытаясь чередовать цвета фона для вложенных элементов div.

Это то, что я намерен достичь (без встроенных стилей):

<div style="background: #fff;">
    <div style="background: #000;">
        <div style="background: #fff;">
            <div style="background: #000;">
                and so on...
            </div>
        </div>
    </div>
</div>

Я чувствую, что, должно быть, мне не хватает чего-то очевидного! Я старалсяdiv:nth-of-type(2n) но это, кажется, применимо только на одном уровне.

Это для эксперимента, в котором генерируются div, поэтому решение должно быть бесконечным (а не что-то вроде div div div = white). Я знаю, что это довольно легко с JavaScript, простоlooking for a pure CSS solution.

  • Хех, я только что изменил его, так как в любом случае это не было большой работой, и мне нравится улучшать вещи, которые были возможны.

    от
  • Хе-хе :) Я чувствую то же самое, не каждый день ты задаешь очень простой вопрос CSS, который никто раньше не задавал! : D

    от daviestar
  • Спасибо за ваш сценарий. Я использую mootools, но я уверен, что это будет полезно для других.

    от daviestar
  • Даже если это не так, все в порядке, я не каждый день используюdo {} while () :п

    от
  • С некоторыми небольшими изменениями вы можете сделать так, чтобы они соответствовали другим шаблонам или работали с 3 цветами, чередующимися друг за другом.

    от
  • Спасибо за вашу помощь. Кажется странным, что это пока невозможно. Селектор должен называться nth-child-of-type. Возможно, в будущем мы увидим синтаксис, который выглядит как div & gt; (2n) div.

    от daviestar
  • Такого селектора еще не существует. Если вы хотите уменьшить размер HTML-кода, вы также можете использовать атрибуты:jsfiddle.net/fQPXs (с помощьюdiv[x] а такжеdiv[y]). Это неверный HTML5, который требует префикса пользовательских атрибутов с префиксомdata-, Правильный способ сделать это, используя имена классов:<div class="x"> .x{...}.

    от Rob W
  • Это верно,nth-of-type работает только на одном уровне. Поэтому я боюсь, что то, что вы хотите, не имеет решения CSS. Будет проверять ответы, хотя.

    от Mr Lister
  • @AnkitGautam 'Original Poster / Post & apos; что касается вопроса: не может быть сделано, вам придется сделать это с JS. Это не должно быть тяжелой операцией.

    от sg3s
  • @AnkitGautam, как это поможет с проблемой ОП?

    от Mr Lister
  • Я думаю, что это не может быть сделано без дополнительной разметки.

    от mddw
  • 6

    Как указал г-н Листер

    nth-of-type работает на одном уровне (уровень родителя выбранного div).

    Насколько я знаю и после просмотраW3C CSS3 селекторы Похоже, что нет никаких селекторов css для обхода через вложение (кроме селектора & gt;, который смотрит только на прямого потомка родителя).

    Я хотел бы, чтобы я оказался неправ, поскольку это может быть очень полезным.

    Таким образом, единственным (css) решением будет то, которое вы уже заявили:div > div > div {background: white; } Можете ли вы просто сгенерировать это вместе с генерацией элементов div?

  • 4

    Как утверждают другие

    это не возможно в чистом CSS. Однако, используя js, это вполне возможно и довольно просто.

    Для простоты я реализовал это в jQuery, но вы могли бы сделать с чистым JS.

    http://jsfiddle.net/sg3s/Suf3p/

    Я в основном создал небольшой плагин jQuery, который окрашивает селектор, к которому вы применяете его, с помощью основного цвета, и использует подвыбор, чтобы получить совпадающий дочерний элемент для цвета со вторым цветом, и так далее, пока не останется ни одного дочернего элемента, соответствующего вложенному выбору.

    jQuery(function($) {
        $.fn.alternateNestedBgColor = function(subselect, colors) {
            // While not a great optimization, length of the colors array always stays the same
            var l = colors.length;
    
            // Itterate over all element in possible array
            // jQuery best practice to handle initializing multiple elements at once
            return this.each(function() {
                var $sub = $(this), i = 0; 
    
                // Executes code, at least once
                do {
    
                    // Set bg color for current $sub element
                    $sub.css('backgroundColor', colors[i++ % l]);
                    // Set $sub to direct children matching given selector
                    $sub = $sub.children(subselect);
    
                // Will repeat the do section if the condition returns true
                } while ($sub.length > 0);
            });
        };
    
        // target first div in the body
        // first argument = child selector
        // second argument = array list of colors
        $('body>div').alternateNestedBgColor('div', ['red', 'green', 'blue', 'purple', 'grey']);
    });
    

    Update Как и просил обновление подробно, какapply а такжеmodulo были использованы.

    Прошло почти 2 года с тех пор, как я недавно опубликовал это. И во время работы решение, которое я принял тогда, было немного многословным и запутанным, как, например, мне никогда не было нужноapply, Мне стало немного удобнее с областями видимости, поэтому я изменил функцию, чтобы она стала намного проще.

    Единственная ситуация, когдаapply полезно, когда вам нужно передать значениеthis переменная внутри области действия функции. Если вы не работаете с классами, не так много ситуаций, в которых вы должны нуждатьсяapply или жеcall, Если вы хотите прочитать об этом, я хотел бы отослать вас кэтот ответ, который объясняет это в контексте классов. Ссылка MDN также является хорошим ресурсом (для этой и других конструкций / концепций javascript).

    Что касаетсяmoduloэто основная математика иэтот вопрос хорошо объясняет операцию, Короче говоря, он даст вам полный целочисленный остаток после деления числа на другое. Так33 % 8 = 1 который вы могли бы написать как33-parseInt(33/8)*8 в JS, хотя это было бы крайне неэффективно. Результатом операции всегда будет 0 (когда число полностью делится) на 2-й аргумент минус 1 (так что 7 в моем примере).

    0 % 3 = 0 // technically doesn't exist (as you can't divide 0 with anything) but 0 for practicality in all programming languages afaik(?)
    1 % 3 = 1
    2 % 3 = 2
    3 % 3 = 0
    4 % 3 = 1
    5 % 3 = 2
    6 % 3 = 0 etc...
    

    Это одна из тех операций, которая по своей природе проста для вашего процессора, фактически без возможности сделать это у нас не было бы компьютеров.

    В ревизии javascript я написал выбор цвета из данного массива какcolors[i++ % l].

    В письменном виде это даст мне остатокi / l и использовать это целое число в качестве индекса дляcolors массив, который возвращает цвет для использования.

    ++ добавит 1 только после возврата значенияi для использования в модуле, это поведение будет полностью изменено, если бы я написал++i, но это не сработает для нашей цели здесь.

    Для справкивот статья MDN о сделать ... в то время как.

    Я надеюсь, что кое-что прояснилось! :)