Css selector (learning notes) and css selector learning notes

Css selector (learning notes) and css selector learning notes

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

1. div + p select all <p> elements following the <div> element.
Explanation: find p, p. prev = div is OK!

2. [class ~ = Flower] select all elements whose title attribute contains the word "flower.
Note: class = "abc xyz" abc is a word.

3. [lang | = en] select all elements whose lang attribute value starts with "en.
Note: the so-called Start must use-as the separator, class = "en-yy" OK, class = "en_yy" fail

4. [src ^ = "https"]
Explanation: The str attribute starts with https, which can be matched with httpsss. |

5. [src $ = ". pdf"]
Explanation: $ is followed by ^, which is equivalent to regular expression.

6. [src * = ggc]
Explanation: as long as there is a ggc, like SQL's like % ggc %

4. p: first-child: select each <p> element that belongs to the first child element of the parent element.
Explanation: elem has any parent, elem is first child, elem is p. 3 condition true is OK
Note: This is the same as p: nth-child (1 ).
Differences between nth-of-type and nth-of-child
The difference between the two is a practical analogy: family planning population check: nth-of-child is a second child and a girl, a fine! Nth-of-type is the first child, the second girl from birth, fine!

Nth-of-type (2n + 1) algorithm, where n represents every row, from 0, 1, 2... 2n + 1 is 2*0 + 1, 2*1 + 1, 2*2 + 1... the ordinary multiplication and addition method, so every time the answer is calculated, the answer lights up.
5. p: nth-of-type (5)
Explanation: eq (4) selects 5th

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

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

8. p: nth-of-type (odd/even)
Explanation: singular, double

9. p: nth-of-type (3n + 2)
Explanation: n is 0 at the beginning, and 1 + 2 can be expressed as the actual point. from 2nd, 3 * n is a multiple of 3, so it can be expressed as one light for every 3. The entire sentence starts from 2nd, every 3 bright ones (starting 2 is also bright)

10. p: nth-of-type (n + 3): nth-of-type (-n + 5)
Explanation: between 3-5 (both 3 and 5 are counted). The principle is that filter2 times.

Css derived selector, id selector, and class selector

The derived selector allows the child element in an element to define a style, for example, li a {font-size: 14px} defines a 14px font style class selector for sub-element a under li. css styles are introduced in html. The class selector uses a ". :. box {width: 960px; margin: 0 auto; padding: 0px; overflow: hidden}
On the html page, use the class = "class Name" method to call: <div class = "box"> here is the content </div> the category selector method is simple and flexible, you can create and delete pages at any time. The id selector starts with "#" in CSS, for example, # box {width: 960px; margin: 0 auto; padding: 0px; overflow: hidden} is called using the id = "category name" method on the html page: <div id = "box"> here is the content </div> the id selector and the category selector are actually the same. Generally, the id selector is only used to indicate non-repeated styles, the category selector is more flexible, while the id selector only represents important style fields.

The usage of various css selectors

CSS element Selector

Html {color: black ;}

H1 {color: blue ;}
H2 {color: silver ;}

Selector Group

Body, h2, p, table, th, td, pre, strong, em {color: gray ;}

CSS class selector

. Important {font-weight: bold ;}
. Warning {font-weight: italic ;}
. Important. warning {background: silver ;}

Css id Selector

# MostImportant {color: red; background: yellow ;}

CSS attribute Selector

Img [alt] {border: 5px solid red ;}
P [class = "important warning"] {color: red ;}

CSS descendant Selector

H1 em {color: red ;}

CSS child element Selector

H1> strong {color: red ;}

CSS adjacent sibling Selector

H1 + p {margin-top: 50px ;}