嵌套<ul>结构下目标<a>元素定位问题求助

以下是几个能精准定位你标注为<!-- Target this link -->的a元素的CSS选择器方案：

方案1：利用最外层列表的深度类（最直接） #

最外层的ul带有wc-block-product-categories-list--depth-0类，我们可以通过这个类锁定顶层列表，再结合子选择器>选中顶层li的直接子a元素，完全不会选中嵌套列表里的a：

ul.wc-block-product-categories-list--depth-0 > li.wc-block-product-categories-list-item > a {
  /* 你的样式 */
}

方案2：通过父级li是否包含子列表筛选（更灵活） #

目标a所在的父级li都包含一个子ul，用:has伪类可以直接选中这类li，再定位它的直接子a，不需要依赖深度类名称：

li.wc-block-product-categories-list-item:has(> ul) > a {
  /* 你的样式 */
}

注意：:has伪类目前已被Chrome、Firefox（121+）、Safari等主流浏览器支持。

方案3：排除嵌套列表中的a元素（兜底方案） #

先选中所有li下的直接子a，再排除那些位于深度为1的列表里的a：

li.wc-block-product-categories-list-item > a:not(.wc-block-product-categories-list--depth-1 li a) {
  /* 你的样式 */
}

测试用HTML结构 #

<ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-0">
    <li class="wc-block-product-categories-list-item">
        <a style="" href="#"> <!-- Target this link -->
            <span class="wc-block-product-categories-list-item__name">text</span>
        </a>
        <ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-1">
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
        </ul>
    </li>
    <li class="wc-block-product-categories-list-item">
        <a style="" href="#"> <!-- Target this link -->
            <span class="wc-block-product-categories-list-item__name">text</span>
        </a>
        <ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-1">
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
            <li class="wc-block-product-categories-list-item">
                <a style="" href="#">
                    <span class="wc-block-product-categories-list-item__name">text</span>
                </a>
            </li>
        </ul>
    </li>
</ul>

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