css 故障定位元件

qrjkbowd 于 2023-02-26 发布在其他

关注(0)|答案(3)|浏览(115)

在嵌套的<ul>中定位元素时遇到问题。
在下面的代码块中，我尝试将<a>定位到父<li>之后

<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>

我试过使用子选择器（〉）、相邻和通用兄弟选择器（~和+）、伪类（：first-child），但我无法访问那个超链接。

css

来源：https://stackoverflow.com/questions/75569178/trouble-targeting-element

3条答案

按热度按时间

ut6juiuv1#

参照*--depth-0父类：

.wc-block-product-categories-list--depth-0 > li > a {

}

示例：
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-02-26

lokaqttq2#

如果你只寻找第一个li的第一个孩子-那么你可以使用li：first child来定位它-如果它只是两个直接后代li的第一个a-那么删除：first-child伪选择器。
注意UL的类名的使用-这允许区分第一个li，因为该类是唯一的。

.wc-block-product-categories-list--depth-0 > li:first-child > a {
  color: red
}

<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>

赞(0）回复(0）举报 2023-02-26

xqkwcwgp3#

不使用类名 *，如果元素是not，是另一个li的后代，则可以将其作为目标：

:not(li) > ul > li > a {}

**只是为了好玩，学习做同样事情的其他酷方法 *

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-02-26

我来回答

css 故障定位元件

3条答案

相关问题

热门标签

最新问答