I'm working on an Asp.Net M开发者_JAVA技巧VC 3 project and have run into a brick wall on why this doesn't work like I think it should.
My markup is:
<fieldset>
<input type="hidden" value="2">
<div class="editor-label">
<label for="Name"> Name</label>
</div>
...
</fieldset>
My css is:
.display-label, .editor-label
{
margin: 0.8em 0 0 0;
font-weight: bold;
display: inline;
}
fieldset > div:first-child
{
margin: 0;
}
All I want to do is make the first div in the fieldset have a margin of 0. I thought that the selector fieldset > div:first-child
would apply the style to "the first child of a fieldset, whose type is a div", but apparently something is eluding me.
I've tried this in IE9/FF/Chrome so it's not an old browser messing with my selectors.
Thanks.
fieldset > div:first-child
means "select the first child element of a fieldset
if it's a div
".
It does not mean "select the first div
in the fieldset
".
The first child in this case is <input type="hidden" value="2">
.
To select that div
without changing the HTML, you need to use fieldset > div:first-of-type
.
Unfortunately, while :first-child
is widely supported, :first-of-type
only works in IE9+ and other modern browsers.
So, in this case, the best fix is to continue using fieldset > div:first-child
, and simply move <input type="hidden" value="2">
so that's it's not the first child.
精彩评论