使用nth-child/type自动为页面上的每个链接设置不同的样式? [英] Automatically style each link on a page differently using nth-child/type?

问题描述

我想为页面上的特定链接添加特殊样式，但我不想为页面上可能出现的每个链接添加单独的类.我希望每个8n + 1(通过8n + 8)href都是不同的颜色.到目前为止，使用nth-child或nth-of-type无法正常工作.我认为这是因为链接位于段落和列表等中，因此即使我为其添加前缀的父选择器是父选择器，也不会将它们识别为直接选择器或同级选择器.

I want to add a special style to specific links on my page but I don't want to add a separate class to each link that might appear on a page. I want every 8n+1 (through 8n+8) href to be a different color. So far it's not working using nth-child or nth-of-type. I assume this is because the links are in paragraphs and lists, etc., so they aren't recognized as direct or even sibling selectors, even though the parent selector I'm prefixing it with is the parent.

这是我的CSS:

#main > a:nth-of-type(8n+1) {
    color: #ef9623 !important;
}

#main > a:nth-of-type(8n+2) {
    color: #dab828 !important;
}

等我已经尝试过〜且没有一个.他们似乎都不起作用.可能需要jquery而不是CSS吗?

etc. I've tried it with ~ and without either one. None of them seem to work. Is it likely that this will require jquery instead of CSS?

推荐答案

如果链接位于段落中，则css选择器需要适当.假设您有这个html:

If the links are in paragraphs, than the css selectors need to appropriate. Assuming you have this html:

<div class="wrap">
    <p><a href="#">foo</a></p>
    .
    .
    .
</div>

要设置链接样式，您需要像这样选择:

To style the links you need to select like this:

div.wrap p:nth-child(8n+2)  a { … }

因为段落是要数的孩子.

Because the paragraphs are the children to count.

编辑如果某些链接位于段落中，而有些则不在段落中，则需要创建一个更灵活的选择器.您可以做的一件事是为第一级的每个孩子设置一个类，例如:

EDIT If some of the links are in paragraphs and some not, you need to create a more flexible selector. One thing you can do is to set a class for each child of the first level like:

<div class="wrap">
    <p class="countable"><a href="#">foo</a></p>
    <div class="countable"><a … </a></div
    .
    .
    .
</div>

比您可以选择的格式: div.wrap .countable:nth-​​child(…)a {…}

Than you can select like: div.wrap .countable:nth-child(…) a { … }

我不确定是否: div.wrap>*:nth-​​child(…)a {…} 可以工作，但是我很确定…

I am unsure if even: div.wrap > *:nth-child(…) a { … } could work, but I am pretty sure…

证明

编辑#2

实际上， nth-child 伪选择器仅适用于直接子级(> )，以设置每个第8个链接的样式，无论您在HTML中的哪个位置需要使用JS.

In fact the nth-child pseudo selector will only work for direct children (>), to style each 8th link, no matter where in the HTML you will need to use JS.

$(document).ready(function () {
    $.each($('#main a'), function (idx, e) {
        // % the nth child 
        if (idx % 8 == 0) { 
            //do something with the element
            $(e).html('eighth');
        }
    });
});

这样，如果 idx％nthChild == 0 ，每个出现在DOM中的链接都将添加到列表中并设置样式.

This way each link, in appearance in the DOM, will be added to a list and styled if idx % nthChild == 0.

编辑#3

最后，整个过程可以简化为:

Finally, the whole thing can be simplified to:

$(document).ready(function () {
    $.each($('#main a'), function (idx, e) {
        $(e).addClass('nth-' + (idx % 8));
    });
});

这将为从 nth-0 到 nth-7 的每个链接添加一个类，并再次开始直到处理完所有元素.

this will add a class to each link starting from nth-0 going to nth-7 and starting again until all elements are processed.

这篇关于使用nth-child/type自动为页面上的每个链接设置不同的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！