我有以下 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。）
我已經嘗試了幾個小時來弄清楚出了什么問題，但沒有任何效果。
EDIT: In hindsight, I'm actually finding that none of the outlines are appearing, except for the one section that is being shown at the moment. So it would seem that none of those declarations with the outline in it, are working.
uj5u.com熱心網友回復：
正如我們從doc 中知道的那樣，所有瀏覽器尚不支持同時使用兩個選擇器。
如果你想在 IE 中使用它們，只需將其替換為：
.formhidden[id*='petinfo_']:not(:nth-child(2)):not(:nth-last-child(4)) {
outline: 1px solid black;
margin-bottom: 24px
}
uj5u.com熱心網友回復：
最后，如果它是 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}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/338739.html
標籤：html css internet-explorer windows-7