Question

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

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

红色链接
绿色链接
红色链接
绿色链接
...

这是我的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 -->

...这就是我尝试过的CSS，我知道无法完成这项工作

#aRandomDivforThisQuestion a:nth-of-type(odd) {
    border-bottom: 1px solid red;
    color: red;
}

#aRandomDivforThisQuestion a:nth-of-type(even) {
    border-bottom: 1px solid #3DCD7C;
    color: #3DCD7C;
}

所以，简而言之：我想要的是标签中带有id aRandomDivForThisQuestion的每个标签都遵循这种模式，无论它是div的孩子，还是div的孩子的孩子，......

你们能帮助我吗？

PS：css解决方案，javascript解决方案，jquery解决方案，......并不重要。

Answer 1

首先，首先，将事物包装在p元素中以继承显示属性并不是一种好的做法。即使您正在进行前端设计，您的代码仍应根据您的数据/元素进行构建。如果你试图根据设计编写你的代码，它只会让你更难，而且将来很难阅读/更新。在这种特定情况下，依赖P元素的属性会产生副作用，实际上你可能最终花时间，试图找出问题所在。

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

2）只有在有意义的情况下才进行分组。如果它可以帮助你编码明智。（该组的孩子将有共同的属性等）

回到你的问题。尝试使用

:nth-child()

一旦摆脱了

元素。

:nth-child(odd)

:nth-child(even)

通过在绿色和红色之间切换来完成所有工作

https://jsfiddle.net/dLh25u0r/1/

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

 .each()

无论它们是否嵌套，它都会迭代你想要的div内部的每个实例。确保将代码放在此代码中以便运行。

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

导入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>

https://jsfiddle.net/8swLcdcz/

Answer 2

使用CSS执行此操作的唯一方法是非常冗长（实际上，当我开始考虑它时，这是不可能的）。它是 F 的<p>标签，因为:nth-child只影响直接儿童......而不是孙子和其他后代。您唯一的解决方案是使用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>

这个CSS：

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; }

https://jsfiddle.net/r0b87pp4/1/

Answer 3

使用nth-child将不起作用，因为您的链接不是同一元素的所有子元素，并且使用nth-of-type将无法工作，因为每个新一代（子节点，节点的孙子节点）都会获得它自己的“ - 类型” ... n 重置。

您可以使用javascript或jQuery将任意类附加到容器中的每个链接 - 任何给定DOM元素的子树 - 包括正文中的每个链接。

给定一些<a>个节点以及一些要循环和附加的类集，只要你有一些方法可以选择它们，节点的深度并不重要。

在jQuery中，$('#aRandomDivforThisQuestion a')将选择div中的所有链接，而不是任何其他链接。您可以使用$('body a')或$(a)来获取页面上的所有链接，或$('.linkmap a')获取课程中的所有链接，但不能使用其他链接。

然后，遍历节点列表并为每个节点分配一个类，每隔一个节点或每三个节点重新启动一个节点，具体取决于您想要的变量数量。您可以只['odd', 'even']（每隔一个链接）或['red', 'blue', 'green']（每隔三个链接）

这是一个函数，可以获取任意链接列表并对其应用任意一组类。它比必要的更冗长（线条可以组合），但这种方式更清晰它需要一个jQuery元素列表和一个简单的类名称javascript数组。

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

在我的test fiddle中查看它的实际操作，我将两组不同的类应用于同一组节点，将每个其他链接设置为红色/绿色，并将每个第三个链接设置为粗体/斜体/下划线，通过调用功能两次。

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

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

Answer 4

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

父级中嵌套和非嵌套链接的特定样式模式

4 个答案: