Javascript 父对象中嵌套链接和非嵌套链接的特定样式模式

我正在一个网站上工作，我想为我的链接设计一个相当具体的样式，但我不知道怎么做

我基本上想要的是以下结果：

• 红环

• 绿色链接

• 红环

• 绿色链接

这是我的html

<div id="aRandomDivforThisQuestion">
        <a href="#">a red link</a>
        <p>
            <a href="#">a green link</a>
            <a href="#">a red link again</a>
        </p>
        <a href="#">yet again a green link</a>
</div><!-- /aRandomDivForThisQuestion -->

所以，简而言之：我想要的是，id为aRandomDivForThisQuestion的标记中的每个标记都遵循此模式，而不管它是div的子级，还是div的子级

你们能帮帮我吗

---

PS:css解决方案、javascript解决方案、jquery解决方案……其实并不重要。

所以首先，在p元素中包装内容以继承显示属性并不是很好的做法。即使您正在进行前端设计，您的代码仍然应该根据您的数据/元素进行结构化。如果你试图按照设计来编写代码，那只会让事情变得更难，而且将来很难阅读/更新。在这种特定情况下，依赖P元素的属性将产生副作用，您可能最终会花费时间，试图找出错误所在

1） 如果需要对元素进行分组，请使用div

2） 只有在有意义的情况下才能分组。如果它有助于您明智地编码（组中的子组将具有公共属性等）

回到你的问题上来。试用

:nth-child()

一旦去掉元素

:nth-child(odd)

:nth-child(even)

将在绿色和红色之间切换，为您完成所有工作

用于嵌套元素的Jquery解决方案： 在此解决方案中，我使用：

 .each()

它将遍历div中所需的每个实例，而不管它们是否嵌套。请确保将代码放在其中以使其运行

 <script>
    $(document).ready(function(){
          //add the code
    })
 </script>

$（文档）.ready（函数（）{
//添加代码
})

并导入Jquery

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

---

使用CSS实现这一点的唯一方法是过于冗长（事实上，当我开始考虑它时，这是不可能的）。这是

标签造成的，因为

：n个子项

只影响直接子项。。。不是孙子和其他后代。您唯一的解决方案是使用javascript或将链接放在一个平面列表中，并使用类名来获得所需的段落样式：

<a href="#">link 1</a>
<a href="#" class="p-start">link 2</a>
<a href="#">link 3</a>
<a href="#" class="p-end">link 4</a>
<a href="#">link 5</a>

---

使用

n个子节点

将不起作用，因为您的链接不是同一元素的所有子元素，而使用

n个类型

将不起作用，因为每个新的一代（节点的子节点、孙子节点）都有自己的“-”类型“。。。也就是说，n被重置

您可以使用javascript或jQuery将任意类附加到容器中的每个链接（任何给定DOM元素的子树），包括主体中的每个链接

给定一组

，其中我将两组不同的类应用于同一组节点，通过调用函数两次，将每隔一个链接设置为红色/绿色，将每三个链接设置为粗体/斜体/下划线

stripe( $('#aRandomDivforThisQuestion a'),
        [ 'odd', 'even' ] );

stripe( $('#aRandomDivforThisQuestion a'),
        [ 'bld', 'ital', 'undrln' ] );

我认为仅仅使用CSS是不可能的。
nth类型
的行为类似于
nth child
，除了
nth类型
用于相同类型的儿童。例如，div，span，li，一个类名…--每个级别的孩子都是独立的（即：孩子的孩子），不是吗？我一直认为…我在很多网站上都看到过，真的。他们这样做是因为它很容易解决某些问题，但在你的情况下，随着你的网站变得越来越复杂，它可能会导致定位问题，这会让你发疯。无论如何，请检查解决方案中的第二个链接。它将帮助您以任何方式嵌套元素，但它使用JQueryTanks作为帮助对象！你真的帮了我。我曾经尝试过：nth-child（），但我知道这对嵌套链接不起作用，所以我想尝试一下CSS中的嵌套链接，但我想这些问题单靠CSS无法解决……不用担心！确保你点击勾号，让这个问题的未来访问者知道这个答案works@RainbowDasher我同意sinanspd的观点——尝试以一种表示页面结构而不是外观的方式来编写标记，也就是说，避免仅仅为了外观而用p或div来包装东西；如果它们构成逻辑分组，则将其包装。-sinanspd-如果你在这里解释得更多，而不是仅仅依靠小提琴的链接，我会支持你的答案。这似乎并不能解决问题。
<a href="#">link 1</a>
<a href="#" class="p-start">link 2</a>
<a href="#">link 3</a>
<a href="#" class="p-end">link 4</a>
<a href="#">link 5</a>

a { display: block }
a:nth-child(odd) { color: red }
a:nth-child(even) { color: green }
a.p-start { margin-top: 1em; }
a.p-end { margin-bottom: 1em; }

function stripe(elems, classes)
{
    var which = 0;
    $(elems).each(function(i, elem) {
        var addit = classes[which];
        which = (which + 1) % classes.length;
        $(elem).addClass(addit);
    });
}

stripe( $('#aRandomDivforThisQuestion a'),
        [ 'odd', 'even' ] );

stripe( $('#aRandomDivforThisQuestion a'),
        [ 'bld', 'ital', 'undrln' ] );