为什么 nth-child() CSS 选择器会考虑设置为 display:none 的元素？答案

【问题标题】：Why does the nth-child() CSS selector consider elements that are set to display:none?为什么 nth-child() CSS 选择器会考虑设置为 display:none 的元素？
【发布时间】：2020-07-31 18:30:31
【问题描述】：

我注意到 nth-child() 选择器有一些奇怪的行为。它似乎也考虑设置为display: none 的元素。有没有办法绕过这种行为？

我遇到的问题是某些标签是动态添加/删除的。它们都设置为display: none，但我不能每次都更改我的 nth-child() 选择器。

这是问题的缩小表示：

    <head>
        <style>
            .container div{
                height: 20px;
            }
            .top, .content{
                display:none
            }
            .mid:nth-child(2){
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="top"></div>
            <div class="content"></div>
            <div class="mid"></div>
            <div class="mid"></div>
            <div class="bottom"></div>
        </div>
    </body>
</html>

在这里，.mid:nth-child(2) 不起作用，因为它在技术上是第四个孩子。所以，要让它工作，我需要.mid:nth-child(4) 这实际上是正常的还是我可以绕过它？如果是正常的，为什么会这样呢？

【问题讨论】：

有没有办法绕过这种行为？ --> 没有
display:none 不会从 DOM 中移除元素，因此它们仍然计数
这个问题被否决的任何原因？我想这通常不会成为问题，但我使用的是 Shopify，因此它倾向于在元素之间插入某些

标签： html css css-selectors

【解决方案1】：

不，这是预期行为

CSS 选择器作用于 DOM 树，而不是视觉表示。如果您认为display: none 规则需要（如果通过样式表应用）选择器来定位该元素，这将变得更加明显。如果元素在隐藏后无法再被 CSS 选择器看到，则将不再应用将其样式设置为隐藏的规则，并且该元素将重新出现。

【讨论】：

哦，哇，是的。从来没有这样想过。感谢您的澄清。