Nth-child (N) selector for jquery

Talk about Nth-child (an+b).

Nth-child () This thing, is a pseudo class selector in the CSS3, jquery is also used.

There is one such translation in the "JQuery Basics Tutorial" of the domestic translation textbook. Thus the CSS selector $ (' P:nth-child (1) ') obtains all p as the 1th child element of its parent element. "First read this sentence, always feel difficult to understand, so there is the impulse of Google (here to a strong BS education network, slow speed slower than the snail, open Google have to wait half a day, download the basic around 1byte/5s, jquery Chinese community can not visit.) ）

After a whole night's search, the Chinese version of the explanation is probably as follows:

Matches the nth child element under its parent element, and of course an+b can also be replaced with odd or even, which means matching the odd (even) element under its parent element. The difference from EQ (index) is that EQ (index) matches only one element. Nth-child () will match child elements for each parent element. : Nth-child starting from 1, and: Eq () is from 0!

Some people say this in the CSS Tutorial: nth-child () The parameter is an+b, if according to w3.org on the description, written in Chinese, it is likely to make people dizzy, plus the author's writing level is limited, so I decided to avoid an+b, divided it into 5 ways to write a total of 5 parts to explain (detailed See http://www.webjx.com/css/pcss-10232.html). After reading the full article, the understanding of it is still faint, and the example given later is directly contradictory to the experiment I did (later the analysis was caused by his experiment without element nesting).

So I had to find the original English:

The:nth-child (an+b) Pseudo-class notation represents an element this has an+b-1 siblings before it in the document tree, For a given positive integer or zero value of N.

Notice such a phrase "in the document Tree". I do not know why so many Chinese translation of this word removed, but it does understand this

A selector is critical.

Now, let's take a new understanding of this selector. The meaning of the parameter an+b is not to be further delved into, by $ (' P:nth-child (2) ') For example:

In our P-tree, select all P with 1 (an+b-1) brothers (siblings before it)

(Element). At this point, the result of the selection should be the element collection.

In fact, combining the concept of "tree", the Nth-child () is a good understanding of the selector. The following figure:

Figure 1 P:nth-child (1) and P:nth-child (2) selected element legend

In our family relationship, Nth-child (n) chooses the collection of all the old N in our family.

在这里，还有一个问题：
$('p:nth-child(odd)').css("color","red");
$('p:nth-child(even)').css("color","blue");

With the above two sentences, do all P's font colors appear at the red and blue intervals? The answer is of course: No.

Reference documents:

"Selectors Working Draft December 2005", 2005.10.15