：不是（：first-of-type）等效于IE

Question

我有一个包含多个字段集的表单，然后使用下面的代码将它们堆叠在一起。 Javascript使用前进和后退按钮旋转字段集。如果没有兼容模式，它们不适用于IE11。 我知道我可以使用较旧的css2 first-child：之前做这项工作但是遇到了麻烦

http://jsfiddle.net/rCd26/901/

使用firefox和chrome

#AUTO fieldset:not(:first-of-type) {
display: none;/*remove to see all feildsets*/
}

不工作的IE

#AUTO fieldset:first-child:before {
display: none;/*remove to see all feildsets*/
}

我的IE代码出错了什么？为什么IE会被推迟？

＆＃13;

＆＃13;

/*form styles*/
#AUTO {
display:table;/*makes div fill content*/
width: 100%;
height:auto;
margin:0 auto;
position: relative;
border:1px solid green; /*visual aid to make sure div fills content*/
margin-bottom:30px;
}
#AUTO fieldset {text-align:center;
width: 95%;margin:0 auto;
border:1px solid red; /*visual aid to make sure div fills content*/
box-shadow: 2px 2px 2px 2px #000;
background-color:#FFF;
display:table;/*makes div fill content*/
}
#miles{
display:none;/*spamer fills this out and it gets rejected my mail         script*/
}
/*Hide all except first fieldset*/
#AUTO fieldset:not(:first-of-type) {
display: none;/*remove to see all feildsets*/
}
#AUTO fieldset:first-child:before {
display: none;/*remove to see all feildsets*/
} 

＆＃13;

<form id="AUTO"   method="post" action="inc/estimate.php">



<!-- fieldsets -->
<fieldset>
    <div class="div1"><img src="images/step1.png" width="233" height="65"></div>

<h3>CONTACT INFO</h3>


<div id="contact_name">FULL NAME: *<br>
<input id="element_2_1" name="name" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div> 	
	

<div id="contact_phone">PHONE NUMBER: *<br>
<input id="element_1" name="phone" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/></div> 

<div id="contact_email">EMAIL:<br>
<input id="element_1" name="email" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/>
</div> 

<div class="button_holder">
<input type="button" name="next" class="next action-button" value="Next"/>
</div>



</fieldset>





<fieldset>
<div class="div1"><img src="images/step2.png" width="233" height="65"></div>


<h3>VEHICLE INFO</h3>

<div id="contact_name">VEHICLE MAKE: *<br>
<input id="element_2_1" name="make" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div> 	
	

<div id="contact_phone">VEHICLE MODEL: *<br>
<input id="element_1" name="model" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/></div> 

<div id="contact_email">YEAR*:<br>
<input id="element_1" name="year" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/>
</div> 


<div id="contact_name">VIN NUMBER: <br>
<input id="element_2_1" name="vin" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div> 	
	

<div id="contact_phone">INSURANCE COMPANY ( if applicable ):<br>
<input id="element_1" name="insurance_company" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/></div> 






<div class="button_holder">
<input type="button" name="next" class="next action-button" value="Next"/>
<input type="button" name="previous" class="previous action-button" value="Previous"/>
</div>


</fieldset> 

<fieldset>
<div class="div1"><img src="images/step3.png" width="233" height="65"></div>
<div class="button_holder">
<input type="button" name="next" class="next action-button" value="ALMOST DONE"/>
<input type="button" name="previous" class="previous action-button" value="Previous" />
</div>
</fieldset> 

<fieldset>
<div class="div1"><img src="images/step4.png" width="233" height="65"></div>

<h4>THANK YOU!</h4>
<h5>Once you hit Submit you receive an email confirming your submission.</h5>

<div class="button_holder">
<input type="submit" name="submit" class="submit action-button" value="SUBMIT" />
<input type="button" name="previous" class="previous action-button" value="Previous"  />

</div>

</fieldset> 



</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果你想在第一个之后隐藏所有fieldsets，你还有其他简单的解决方案：

同级选择器

#AUTO fieldset ~ fieldset {
   display: none;/*remove to see all feildsets*/
}

http://jsfiddle.net/rCd26/902/

相邻选择器

#AUTO fieldset + fieldset {
  display: none;/*remove to see all feildsets*/
}

http://jsfiddle.net/rCd26/903/

全部隐藏/首先显示

#AUTO fieldset {
  display:none
}
#AUTO fieldset:first-child {
  display: block;
}

http://jsfiddle.net/rCd26/904/

Answer 2

您可以使用:nth-of-type()伪类来选择除第一个fieldset以外的所有内容而不使用否定伪类：

fieldset:nth-of-type(n+2){...}