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

10

Я провожу небольшой эксперимент, пытаясь чередовать цвета фона для вложенных элементов 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.

Я думаю, что это не может быть сделано без дополнительной разметки. mddw
Это верно,nth-of-type работает только на одном уровне. Поэтому я боюсь, что то, что вы хотите, не имеет решения CSS. Будет проверять ответы, хотя. Mr Lister
@AnkitGautam, как это поможет с проблемой ОП? Mr Lister
@AnkitGautam 'Original Poster / Post & apos; что касается вопроса: не может быть сделано, вам придется сделать это с JS. Это не должно быть тяжелой операцией. sg3s
Такого селектора еще не существует. Если вы хотите уменьшить размер HTML-кода, вы также можете использовать атрибуты:jsfiddle.net/fQPXs (с помощьюdiv[x] а такжеdiv[y]). Это неверный HTML5, который требует префикса пользовательских атрибутов с префиксомdata-, Правильный способ сделать это, используя имена классов:<div class="x"> .x{...}. Rob W

Ваш Ответ

2   ответа
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 о сделать ... в то время как.

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

С некоторыми небольшими изменениями вы можете сделать так, чтобы они соответствовали другим шаблонам или работали с 3 цветами, чередующимися друг за другом.
Спасибо за ваш сценарий. Я использую mootools, но я уверен, что это будет полезно для других. daviestar
Даже если это не так, все в порядке, я не каждый день используюdo {} while () :п
Хех, я только что изменил его, так как в любом случае это не было большой работой, и мне нравится улучшать вещи, которые были возможны.
Хе-хе :) Я чувствую то же самое, не каждый день ты задаешь очень простой вопрос CSS, который никто раньше не задавал! : D daviestar
6

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

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

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

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

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

Похожие вопросы