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

如果我们还没有添加更多的section，它意味着排除petinfo_0。(在初始状态下，它是从前面开始的第二个div和从末尾开始的第四个div。)

我已经试了好几个小时想弄清楚是什么问题，但是什么都没解决。

编辑:事后看来，我实际上发现除了目前正在显示的一个部分外，没有任何大纲出现。因此，看起来这些带有大纲的声明都不起作用。

Answer 1

正如我们从文档中知道的，并不是所有浏览器都支持同时使用两个选择器。

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

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

Answer 2

最后，如果它是n -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}