CSS Selector (learning note)

Reference http://zachary-guo.iteye.com/blog/605116

1. Div+p selects all <p> elements immediately following the <div> element.
Explanation: Find p, P.prev = div is ok!

2. [Class~=flower] Select all elements of the title property that contain the word "flower".
Explanation: Note is the word oh class= "ABC XYZ" ABC This count a word

3. [lang|=en] Select all elements with the Lang attribute value beginning with "en".
Explanation: Pay attention to the so-called beginning must use-do delimiter, class= "En-yy" OK, class= "en_yy" fail

4. [src^= "https"]
Explanation: The attribute str starts with HTTPS, this can match httpsss also does not like |

5. [src$= ". pdf"]
Explanation: $ is behind, and ^ on the contrary, as the regular understanding

6. [SRC*=GGC]
Explanation: As long as there is GGC, like the SQL%ggc%

4.p:first-child selects each <p> element that belongs to the first child element of a parent element.
Explanation: Elem had any parent, Elem was first child, Elem was p. 3 x Condition true OK
Note: This is the same as P:nth-child (1)
Distinguish between Nth-of-type and Nth-of-child
The difference between the two uses a realistic analogy with family planning: Nth-of-child is a second child, and a girl, fine! Nth-of-type is in charge of his first few births, the second born girl, fine!

Nth-of-type (2n+1) algorithm, n represents each row, from 0,1,2 ... 2n+1 is 2*0+1, 2*1+1, 2*2+1 ... Ordinary multiplication and addition, then each time you figure out the answer, let the answer light.
5.p:nth-of-type (5)
Explanation: EQ (4) Check 5th

6.p:nth-of-type (n+3) | | P:nth-last-of-type (-n+3) After the child also has
Explanation: >=3

7.p:nth-of-type (-n+3)
Explanation: <=3

8. P:nth-of-type (Odd/even)
Explanation: singular, even

9.p:nth-of-type (3n+2)
Explanation: A start n is 0 count a +2 can be expressed as the fact point. From the 2nd pick up, 3*n is a multiple of 3, so can be expressed as every 3 lights a light, the whole sentence is starting from the 2nd, every 3 bright 1 (beginning 2 also light OH)

P:nth-of-type (n+3): Nth-of-type (-n+5)
Explanation: Between 3-5 (3 and 5 are counted), the principle is filter2 times slightly