css selector (study notes)_html/css_WEB-ITnose

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

1. div p selects all

element ; element.
Explanation: find p, p.prev = div is ok!

2. [class~=flower] Select all elements whose title attribute contains the word "flower".
Explanation: Note that it is a word class="abc xyz" abc is a word

3. [lang|=en] Select all elements whose lang attribute value starts with "en".
Explanation: Note that the so-called beginning must be used as a separator, class="en-yy" ok, class="en_yy" fail
                                                                                                                         >Explanation: The attribute str starts with https, which can match httpsss. It also does not work like |

5. [src$=".pdf"]
Explanation: $ is the back, opposite to ^, and regular Same understanding

6. [src*=ggc]
Explanation: As long as there is ggc, it will be successful, like sql like %ggc%

4.p: first-child selects the parent Each

element that is the first child of the element.
Explanation: elem has any parent, elem is first child, elem is p. 3 conditions are true and it is ok
note: This is the same as p:nth-child(1)
The difference is nth-of A practical metaphor for the difference between -type and nth-of-child
is family planning census: nth-of-child means that if it is the second child and it is a girl, you will be fined! nth-of-type doesn’t matter which child he is, the second-born girl will be fined!

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 ...Common multiplication and addition, then every time you calculate the answer, let the answer light up
5.p:nth-of-type(5)
Explanation: eq(4) Select the 5th

6.p:nth-of-type(n 3) || p:nth-last-of-type(-n 3) Counting from the end of the child, there is also a
explanation: >= 3

7.p:nth-of-type(-n 3)
Explanation:
8. p:nth-of-type(odd/even)
Explanation: Odd number, even number

9.p:nth-of-type(3n 2)
Explanation: nth is 0 at the beginning, and 2 can be expressed as a real point. From the 2nd Pick up each one, 3*n is a multiple of 3, so it can be expressed as one light is on for every 3. The whole sentence starts from the 2nd, and one light is on for every 3 (the starting point 2 is also on)

10. p:nth-of-type(n 3):nth-of-type(-n 5)
Explanation: between 3-5 (both 3 and 5 count), the principle is to filter 2 times