提问人:Amaroq 提问时间:10/24/2021 最后编辑:Amaroq 更新时间:10/26/2021 访问量:72
在IE中,此:not(:nth-child():nth-last-child())声明不起作用
In IE, this :not(:nth-child():nth-last-child()) declaration isn't working
问:
我有以下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。
我已经尝试了几个小时来弄清楚出了什么问题,但没有任何效果。
编辑:事后看来,我实际上发现除了目前正在显示的一个部分外,没有出现任何轮廓。因此,似乎那些带有大纲的声明都没有奏效。
答:
0赞
Xudong Peng
10/25/2021
#1
正如我们从文档中得知的那样,并非所有浏览器都支持同时使用两个选择器。
如果你想在IE中使用它们,只需将其替换为:
.formhidden[id*='petinfo_']:not(:nth-child(2)):not(:nth-last-child(4)) {
outline: 1px solid black;
margin-bottom: 24px
}
评论
0赞
Amaroq
10/26/2021
嗯,这似乎也不起作用,这也使它在 Chrome 中也停止工作。
0赞
Amaroq
10/26/2021
#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}
评论
0赞
Xudong Peng
10/26/2021
感谢您发布此问题的解决方案。您可以在 48 小时后将答案标记为已接受的答案,届时可以标记。它可以帮助其他社区成员在未来解决类似的问题。感谢您的理解。
评论