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

Question

我有以下 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。）

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

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

Answer 1

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

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

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

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