CSS nth-child()工作奇怪吗?

时间:2014-07-18 15:33:38

标签: html css magento fieldset

有一个带有两个fieldset的HTML结构,就像下面的jsfiddle示例一样。以下CSS行

#aboutus > fieldset:nth-child(2) li {
    text-align: left;
}

可以影响jsfiddle中的第二个fieldset元素,但在页面上应该为resullt添加此元素:

#aboutus > fieldset:nth-child(4) li {
    text-align: left;
}

没有第4个字段集,但仅在这种情况下将text-align: left;应用于对象(li)。

http://jsfiddle.net/EQPTS/

2 个答案:

答案 0 :(得分:4)

您想使用nth-of-type而非nth-child,前者考虑元素类型,后者考虑其位置和资格。

Demo Fiddle

nth-of-type

  

:nth-​​of-type CSS伪类匹配具有+ b-1的元素   在文档树中具有相同元素名称的兄弟姐妹,   对于n的给定正值或零值,并且具有父元素。   请参阅:nth-​​child以获得更全面的语法描述   论点。如果你这是一个更灵活和有用的伪选择器   想要确保无论在哪里都选择相同类型的标签   它位于父元素内部,或者显示其他不同的标记   在它之前。

nth-child

  

:nth-​​child(an + b)CSS伪类匹配具有的元素   对于给定的积极因素,在文档树中它前面有一个+ b-1个兄弟姐妹   或n为零值,并具有父元素。

     

这可以用这种方式更清楚地描述:匹配元素是   所有孩子被分裂后的元素的第b个孩子   分成一组元素。

答案 1 :(得分:2)

nth-child选择器,选择第n个元素,使用相同类型的选择器。第二个孩子是第一个田野。您需要使用nth-of-type而不是nth-child

#aboutus li {
    text-align: right;
}
#aboutus > fieldset:nth-of-type(2) li {
    text-align: left;
}

这适合你。

小提琴:http://jsfiddle.net/praveenscience/EQPTS/1/