html - CSS nth-child() 工作奇怪吗？

Question

有一个包含两个 fieldset 的 HTML 结构，如下面的 jsfiddle 示例所示。以下 CSS 行

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

可以影响 jsfiddle 中第二个 fieldset 的元素，但是在页面上应该为结果添加这个:

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

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

http://jsfiddle.net/EQPTS/

Answer 1

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

Demo Fiddle

nth-of-type

The :nth-of-type CSS pseudo-class matches an element that has an+b-1 siblings with the same element name before it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument. This is a more flexible and useful pseudo selector if you want to ensure you're selecting the same type of tag no matter where it is inside the parent element, or what other different tags appear before it.

nth-child

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

This can more clearly be described this way: the matching element is the bth child of an element after all its children have been split into groups of a elements each.