有一个带有两个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
)。
答案 0 :(得分:4)
您想使用nth-of-type
而非nth-child
,前者考虑元素类型,后者考虑其位置和资格。
:nth-of-type CSS伪类匹配具有+ b-1的元素 在文档树中具有相同元素名称的兄弟姐妹, 对于n的给定正值或零值,并且具有父元素。 请参阅: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;
}
这适合你。