25羟基维生素D定量检查是什么检查？检查值是29.3nmo1/L，参考范围是47.7-144，这个值低说明缺乏维生素D，不利于钙的补充和吸收，对吗？_百度宝宝知道April 20, 2011
Let's assume this HTML:
&p&Little&/p&
&p&Piggy&/p&
&!-- Want this one --&
&/section&
These will do the exact same thing:
p:nth-child(2) { color: }
p:nth-of-type(2) { color: }
There is a difference though of course.
Our :nth-child selector, in "Plain English," means select an element if:
It is a paragraph element
It is the second child of a parent
Our :nth-of-type selector, in "Plain English," means:
Select the second paragraph child of a parent
:nth-of-type is... what's a good way to say it... less conditional.
Let's say our markup changed to this:
&h1&Words&/h1&
&p&Little&/p&
&p&Piggy&/p&
&!-- Want this one --&
&/section&
This breaks:
p:nth-child(2) { color: } /* Now incorrect */
This still works:
p:nth-of-type(2) { color: } /* Still works */
By "breaks", I mean that the :nth-child selector above is now selecting the word "Little" instead of "Piggy" because that element fulfills both 1) it's the second child and 2) it's a paragraph element. By "still works," I mean that "Piggy" is still being selected because it's the second paragraph under that parent element.
If we were to add an &h2& after that &h1&, the :nth-child selector wouldn't select anything at all, because now the second child is no longer a paragraph so that selector finds nothing. The :nth-of-type again still works.
I feel like :nth-of-type is less fragile and more useful in general, despite :nth-child being more common (in my eyes). How often do you think "I want to select the second child of a parent if it just happens to be a paragraph." Possibly sometimes, but more likely you want to "select the second paragraph" or "select every third table row," which are cases where :nth-of-type is (again, in my eyes) a stronger choice.
I find most of my "crap, why isn't this :nth-child selector working?!" moments are because it turns out I've tag-qualified the selector and that number child isn't really that tag. So when using :nth-child, I find it's generally best to specify the parent and leave :nth-child un-tag-qualified.
dl :nth-child(2) {
} /* is better than */
dd:nth-child(2) {
} /* this */
But, of course it all depends on the exact situation.
Browser support for :nth-of-type is fairly decent... Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+.
I'd say if you need deeper support, jQuery would have your back (use the selector there, apply a class, and style with that class), but in fact jQuery dropped support for :nth-of-type. Seems weird to me. I heard it was because of low usage. If you want to go that route . jQuery 1.9 does now support :nth-of-type again (back to IE 6), so that is an option.
Related: don't forget about the awesome cousins :first-of-type, :last-of-type, :nth-last-of-type and :only-of-type.
If you want to play around with a visual example,
Share this:
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-star}