如何使用:last-child伪类选择面包屑中最后一个<a>标签（ul可选）

Got it, let's break this down so you can reliably target that final breadcrumb link, whether the optional <ul> is present or not.

The Core Problem #

Your breadcrumb structure has two possible states:

1. No <ul>: The last <a> is a direct child of .breadcrumbs
2. With <ul>: The last <a> lives inside the final <li> of that optional <ul>

We can use the :last-child pseudo-class to cover both cases with a combined CSS selector.

The Working Selector #

Here's the CSS that will target the final <a> in either scenario:

/* Target last direct child <a> when no <ul> exists */
.breadcrumbs > a:last-child,
/* Target last <a> inside the optional <ul> (when it's the final child of .breadcrumbs) */
.breadcrumbs > ul:last-child > li:last-child > a {
  /* Add your styles here, e.g.: */
  color: #ff4400;
  font-weight: bold;
}

Why This Works #

Let's break down each part:

• .breadcrumbs > a:last-child: This selects any <a> that is the last direct child of the .breadcrumbs container. This kicks in when the optional <ul> isn't generated, so the final element after the <span> is an <a>.
• .breadcrumbs > ul:last-child > li:last-child > a: This handles the case where the <ul> exists. First, it targets the <ul> that's the last direct child of .breadcrumbs, then drills down to the last <li> inside that <ul>, and finally selects the <a> within that <li>—which is your final breadcrumb link.

Testing With Your Example Structure #

For your provided code:

<div class="breadcrumbs">
  <span>Your location ：</span>
  <a href="#">1</a>
  <a href="#">2</a>
  <ul class="list-item">
    <li> <a href="#">3</a> </li>
    <li> <a href="#">4</a> </li>
  </ul>
</div>

The second selector will kick in, targeting the <a> with text "4"—exactly the final link you want. If you remove the <ul>, the first selector will target the <a> with text "2" instead.

Bonus Tip #

If you want to make this even more robust (in case there are other random direct children in .breadcrumbs), you could tweak the first selector to target the last <a> direct child regardless of other elements using :last-of-type—but since you specifically asked for :last-child, the above solution sticks strictly to that requirement.

内容的提问来源于stack exchange，提问作者Learner