如何通过CSS选择器从元素列表中正确选择第n个元素

Question

我试着练习用CSS选择器获取值，我想出了这个（不像预期的那样工作）

.search-result__advert:not([id]):not([data-ad-show]):nth-child(i)（我也尝试过:nth-of-type(i))

我对I=3的期望：第三个没有id属性和data-ad-show属性的元素被选中，其值将是所需的值3。

<ul class="search-result list-unstyled">

    <li class="search-result__advert">
        <div class="grid grid--rev">
            <p>Desired value 1</p>
        </div>
    </li>
    
    <li class="search-result__advert">
        <div class="grid grid--rev">
            <p>Desired value 2</p>
        </div>
    </li>      

    <li class="search-result__advert" id="signUpWrapper">
        <div id="signUpSavedSearch" class="grid">
            <p>Advertisment 1</p>
        </div>
    </li>

    <li class="search-result__advert hidden" data-ad-show="ad_list_middle">
        <div class="ad" id="ad_list_middle">
            <p>Advertisment 2</p>
        </div>
    </li>

    <li class="search-result__advert">
        <div class="grid grid--rev">
            <p>Desired value 3</p>
        </div>
    </li>

    <li class="search-result__advert">
        <div class="grid grid--rev">
            <p>etc. etc.</p>
        </div>
    </li>
</ul>

Answer 1

等效的css选择器为：

li.search-result__advert:not(id):nth-last-child(2)

为了更好地理解，如果应用nth-child，可以查看以下内容：

:nth-child(n)   p:nth-child(2)  Selects every <p> element that is the second child of its parent

在此阅读有关CSS_SELECTOR的详细信息