Selector Selector
Property Selector:Img[src= "images/2.jpg"]opening match: a[href ^= "page/"] End match: a[href $= "2.html "] Any match: a[href *= "2"] as long as the "2" appears in this attribute, it matches. Group Matching: Div[data-haha ~= "box" in Data-haha with the "box" attribute, it matches. Short Cross match: Div[data-haha |= "box"] Data-haha The characters that begin with "box-" are Matched.
There is a property match: div[alt] Div has the alt attribute, which matches.
The above selectors are compatible with IE7 and are not limited to the beginning of the label, they are labeled for good differentiation and can be used continuously:   D iv[alt][src^= "images"][src*= "2"] has alt attribute, SRC attribute value starts with images, src has "2", match. JQ can also use this type of selector but cannot have quotation marks and is compatible with ie6. ------------------------------------------------------------------------- ------------------------------- Sequencer selector: p : Only-child This element is a parent-only child element . p:first-child If the first element of the parent box is p, then the first one (IE7) . P:last-child , instead of all p elements queued If the last element of the parent box is p, then the last one (IE9) . JQ is used instead of all p elements queued, and $ ("p:first") is all P The first of the elements, both of which are ie6. p:nth-child (n) acts on the nth element in all boxes and is a P element (starting from 1), to select even Number of parameters write 2n, odd 2n+1, can self-adjust (IE9) . JQ, $ ("p:eq (2)") Select all the third p, Whistle. $ ("p:nTh-child (3) "no whistle . P:first-of-type: The first element that acts on a parent box is P (IE9) . & nbsp P:last-of-type: The last element that acts on the parent box is P (IE9) . P:nth-of-type (n): The positive number of the parent box is nth, 2n is even, 2n+1 is odd (IE9) . P:nth-last-of-type (n): acts on the parent box's reciprocal nth , 2n is an even number, 2n+1 is odd (IE9) . JQ also supports such selectors, compatible with IE6. The above p can be changed to the base selector ------------------------------------------------------------------------------------------ -------------- Node selector son selector: div>p check the DIV child node P element (IE7) . Next sibling selector: h3+p Select the sibling element (IE7) for p behind h3, $ ("div"). nextSibling ("p" ). fadeIn () is equivalent to $ ("div+p"). fadeIn (), But the operating mechanism is completely different . All brothers Behind: H4~p selected H4 all P elements (IE7) in the post-sibling element. JQ in $ ("div"). nextall ("p"). fadeIn () is equivalent to $("div~p"). FadeIn (), But the operating mechanism is completely different . --------------------------------------------------------------------------- ----------------------------- above write not all, in this, misleading place also please hesitate to advise ^^.
Summary of common selectors in CSS3
