在 IE 中，这个 :not(:nth-child():nth-last-child()) 声明不起作用

Posted 2023-02-25

【中文标题】在 IE 中，这个 :not(:nth-child():nth-last-child()) 声明不起作用

【英文标题】：In IE, this :not(:nth-child():nth-last-child()) declaration isn't working

【发布时间】：2021-12-10 02:35:52

【问题描述】：

我有以下 CSS。

.formhidden                     overflow: hidden

.formhidden[id*='petinfo_']
                                height: 48px
.formhidden[id*='petproblem_']
                                height: 0px

[id*='petinfo_']:not(.formhidden)
                                outline: 1px solid black; padding: 24px 12px 12px
[id*='petproblem_']:not(.formhidden)
                                outline: 1px solid black; padding: 24px 12px 12px
[id*='petinfo_']:not(.formhidden):not(nth-child(2))
                                margin-top: -24px
[id*='petproblem_']:not(.formhidden)
                                margin-top: -24px
[id*='petinfo_']:not(.formhidden) + div + [id*='petinfo_']
                                margin-top: 24px
[id*='petproblem_']:not(.formhidden) + [id*='petinfo_']
                                margin-top: 24px

/* For any pet div with the formhidden class, hide all,
but reveal the pet's name unless it's the only pet so far.
This is sensitive to position from first and last sibling. */
.formhidden[id*='petinfo_'] *:not(:nth-child(4)):not(:nth-child(5)),
.formhidden[id*='petinfo_']:nth-child(2):nth-last-child(4) *,
.formhidden[id*='petproblem_'] *,
#ownerform.formhidden,
.formhidden.form_btn            visibility: hidden; height: 0px

.formhidden[id*='petinfo_']:not(:nth-child(2):nth-last-child(4))
                                outline: 1px solid black; margin-bottom: 24px

在一个表单中，有以下 div，用这些 div 中的标签和输入分隔表单的各个部分。

<div id="ownerform"></div>
<div id="petinfo_0"></div>
<div id="petproblem_0"></div>
<div id="html_element_recaptcha"></div>
<div class="buttonholder"></div>

简单地说，“.formhidden”类在应用时隐藏了一个部分。我有 javascript 应用并从部分中删除它，因此一次只能看到一个。 javascript 还会克隆 petinfo_0 和 petproblem_0 并将 0 增加到适当的数字。

它在 Chrome 和 Firefox 中运行良好。但是当我在 IE (Edge) 中尝试时，最后的 CSS 声明不起作用。

.formhidden[id*='petinfo_']:not(:nth-child(2):nth-last-child(4))
                                outline: 1px solid black; margin-bottom: 24px

如果我们还没有添加更多部分，则意味着排除 petinfo_0。 （在我们的初始状态下，它是从前面算起的第 2 个 div 和从末尾算起的第 4 个 div。）

我已经尝试了几个小时来找出问题所在，但没有任何效果。

编辑：事后看来，我实际上发现没有出现任何轮廓，除了目前正在显示的一个部分。所以看起来那些带有大纲的声明都不起作用。

【问题讨论】：

我有点困惑。 :not 在 IE 中不受支持，请参阅caniuse.com/?search=not，因此这将是对您标题中提出的问题的解释。但是，在您的文字中，您说的是 IE(Edge)。你是说它在当前版本的 Edge 中不起作用？请注意，Edge 现在不与 IE 关联，而是基于 Chromium。

哦...好吧，我猜它解决了！我不确定我使用的是哪一个。我现在查了一下，是IE11。

一个网站说它有效，一个网站说它无效。 developer.mozilla.org/en-US/docs/Web/CSS/:not

【参考方案1】：

正如我们从doc 中得知的那样，并非所有浏览器都支持同时使用两个选择器。

如果你想在 IE 中使用它们，只需将其替换为：

.formhidden[id*='petinfo_']:not(:nth-child(2)):not(:nth-last-child(4)) 
                outline: 1px solid black;
                margin-bottom: 24px
            

【讨论】：

嗯，这似乎也不起作用，而且它也使它在 Chrome 中停止工作。

【参考方案2】：

最后，如果它是 nth-child(x):last-child(y)，我似乎必须重写它。另外，IE 不支持 unset，所以我们必须显式地用一个值覆盖它。

这对我有用：

    .formhidden[id*='petinfo_']
                                    outline: 1px solid black; margin-bottom: 24px

    .formhidden[id*='petinfo_']:nth-child(2):nth-last-child(4)
                                    outline: 0px; margin-bottom: 0px

【讨论】：

感谢您发布此问题的解决方案。您可以在 48 小时后将您的答案标记为已接受的答案，此时可以标记。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。