仅选择div中的第一个和最后一个链接

Question

我有如下结构：

<div class="navigation_sub_item_background" id="sub_nav_2">
    <div class="navigation_sub_item" id="2_1">
        <a  class="navigation__sub__link" href="?p=2_1">
            <span>
                Test 3
            </span>
        </a>
    </div>
    <div class="navigation_sub_item" id="2_2">
        <a  class="navigation__sub__link" href="?p=2_2">
            <span>
                Test 4
            </span>
        </a>
    </div>
    <div class="navigation_sub_item" id="2_3">
        <a  class="navigation__sub__link" href="?p=2_3">
            <span>
                Test 5
            </span>
        </a>
    </div>
    <div class="navigation_sub_item" id="2_4">
        <a  class="navigation__sub__link" href="?p=2_4">
            <span>
                Test 6
            </span>
        </a>
    </div>
</div>

我想只选择第一个链接和最后一个链接。我尝试div.navigation_sub_item > a.navigation__sub__link:first-of-type，但这会选择所有链接。

有人提出建议吗？

Answer 1

选择第一个和最后一个链接

由于您的链接包含在div元素中，因此您需要选择第一个和最后一个div并定位其中的第一个或最后一个a元素：

.navigation_sub_item:first-child a:first-of-type {
    /* The very first link. */
}

.navigation_sub_item:last-child a:last-of-type {
    /* The very last link. */
}

请注意，我已在first-of-type元素本身上指定了last-of-type和a，以防a中存在多个div元素元素。如果您不关心在其之前或之后出现的其他元素，您可能希望将这些替换为first-child和last-child。

仅存在一个元素的特殊情况

  

我想要他们所有，这很酷。但是如果只有一个.navigation__sub__link-element我该怎么办？然后应用：last-child规则，但我想要使用另一条规则。

在这种情况下，您可以通过指定 {/ 1>} first-child和last-child来覆盖这些选择器的特异性：

.navigation_sub_item:first-child:last-child a {
    /* This will override the above selectors. */
}

或者，如果您未在:first-of-type元素上指定:last-of-type或a，则可以同样使用:only-child选择器：

.navigation_sub_item:only-child a {
    /* This will also override the above selectors. */
}

Answer 2

这应该有用。

.navigation_sub_item:first-child .navigation__sub__link {}
.navigation_sub_item:last-child .navigation__sub__link {}

Answer 3

尝试这个演示示例，这里用于第一个孩子，最后一个孩子

.navigation_sub_item:first-child .navigation__sub__link,
 .navigation_sub_item:last-child .navigation__sub__link{
  // here style 
}

.navigation_sub_item:first-child .navigation__sub__link{
color:red;
}

.navigation_sub_item:last-child .navigation__sub__link{
color:green;
}

<div class="navigation_sub_item_background" id="sub_nav_2">
    <div class="navigation_sub_item" id="2_1">
        <a  class="navigation__sub__link" href="?p=2_1">
            <span>
                Test 3
            </span>
        </a>
    </div>
    <div class="navigation_sub_item" id="2_2">
        <a  class="navigation__sub__link" href="?p=2_2">
            <span>
                Test 4
            </span>
        </a>
    </div>
    <div class="navigation_sub_item" id="2_3">
        <a  class="navigation__sub__link" href="?p=2_3">
            <span>
                Test 5
            </span>
        </a>
    </div>
    <div class="navigation_sub_item" id="2_4">
        <a  class="navigation__sub__link" href="?p=2_4">
            <span>
                Test 6
            </span>
        </a>
    </div>
</div>

Answer 4

您可以按以下方式选择第一个和最后一个孩子

.navigation_sub_item:first-child .navigation__sub__link,
.navigation_sub_item:last-child .navigation__sub__link {
 /*CSS rules*/
} 

您可以阅读有关CSS3 first-child和last-child选择器的更多信息 点击链接。

Answer 5

您应该使用:first-child和:last-child

.navigation_sub_item:first-child a,
.navigation_sub_item:last-child a {
    color: red;
}

DEMO

Answer 6

试试这个：

.navigation_sub_item:first-child .navigation__sub__link

和

.navigation_sub_item:last-child .navigation__sub__link

来涵盖您的评论，请考虑以下事项：

.navigation_sub_item:first-child .navigation__sub__link{
  font-weight: bold
}
.navigation_sub_item:last-child .navigation__sub__link{
  color: blue
}

<div class="navigation_sub_item_background" id="sub_nav_2">
    <div class="navigation_sub_item" id="2_4">
        <a  class="navigation__sub__link" href="?p=2_4">Test 6</a>
    </div>
</div>

Answer 7

我认为最好的方法对我有用

.div-selecter a:last-of-type { color:red;}