Question

我有以下HTML：

<nav aria-label="breadcrumbs" role="navigation" class="breadcrumb">
     <a href="/" data-analytics="{&quot;click_id&quot;:291}" data-impressed="1">Home</a>
     <i aria-hidden="true"></i>
     <a href="/chicago-il">Chicago, IL</a>
     <i aria-hidden="true"></i>
     <span>Cpa</span>
</nav>

我总是想选择第二个链接（又名<a href="/chicago-il">Chicago, IL</a>）。

我该怎么做？

Answer 1

您可以使用nth-child选择器，或者在您的情况下可以应用很多选择器，但这样您将始终以第二个

为目标

.nav a:nth-child(2) {
  /* css here */
}

Answer 2

为了选择第二个锚，您可以使用:nth-of-type：

：nth-of-type（an + b）CSS伪类匹配一个元素，该元素在文档树中具有与其前面具有相同元素名称的+ b-1兄弟，对于给定的正值或零值n，并且有一个父元素

该片段是：

nav a:nth-of-type(2) {
  color: red;
}

<nav aria-label="breadcrumbs" role="navigation" class="breadcrumb">
    <a href="/" data-analytics="{&quot;click_id&quot;:291}" data-impressed="1">Home</a>
    <i aria-hidden="true"></i>
    <a href="/chicago-il">Chicago, IL</a>
    <i aria-hidden="true"></i>
    <span>Cpa</span>
</nav>

相反，如果您想使用:nth-child：

他：nth-child（an + b）CSS伪类匹配在文档树中具有+ b-1兄弟的元素，对于n的给定正值或零值，并且具有父元素。更简单地说，选择器匹配许多子元素，子元素系列中的数字位置与模式a + b匹配。

该片段是：

nav a:nth-child(3) {
  color: red;
}

<nav aria-label="breadcrumbs" role="navigation" class="breadcrumb">
    <a href="/" data-analytics="{&quot;click_id&quot;:291}" data-impressed="1">Home</a>
    <i aria-hidden="true"></i>
    <a href="/chicago-il">Chicago, IL</a>
    <i aria-hidden="true"></i>
    <span>Cpa</span>
</nav>

如何在没有ID或类的nav元素中选择第二个链接？

2 个答案: