html – nth-child没有按预期工作

前端之家收集整理的这篇文章主要介绍了html – nth-child没有按预期工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我将div与我使用nth-child的对象一起添加时,它似乎变得越来越多.

我会感激任何帮助.

<html>
<style>
.documents > a:nth-child(2) {
    border:1px solid red;
}
</style>

<div class="documents">
    <!-- NO DIVS: WORKS FINE -->
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>
<br />
<div class="documents">
    <div></div><!-- ONE DIV: STARTS WITH THE FIRST OBJECT -->
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>
<br />
<div class="documents">
    <div></div><div></div><!-- TWO DIVS: DOES NOT WORK -->
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>
</html>

http://jsfiddle.net/nwrhU/

解决方法

这不是错误的行为;对于如何:nth-​​child()的工作原理只是一种常见的误解.

当你将div元素添加到开头时,你正在寻找的a不再是整体的第二个孩子(这就是:nth-​​child(2)的意思).这是因为当你添加一个div时,它会成为第一个孩子;反过来,第一个成为第二个孩子,第二个成为第三个孩子.当你添加第二个div时,该div成为第二个子节点,并且a元素同样会向前推进另一个步骤,因此a:nth-​​child(2)不再匹配任何内容.

如果您正在寻找第二个a而不管其兄弟姐妹中的任何其他元素类型,请使用:nth-​​of-type(2).

原文链接:https://www.f2er.com/html/226469.html

猜你在找的HTML相关文章