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

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

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

简而言之，class“.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。）

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

编辑：事后看来，我实际上发现 none 的轮廓正在出现，除了目前正在显示的一个部分。因此，似乎 none 中包含大纲的声明正在发挥作用。

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}

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

In IE, this :not(:nth-child():nth-last-child()) declaration isn't working

html

css

internet-explorer

windows-7