CSS3 Selector, low version solution and individual browser private prefixes

First, the basic selector

A wildcard selector: *

Element selector: Div, p ...

ID Selector: #id

Class selector:. ClassName

Group selector: selector 1, selector 2

All major browsers support

Second, level selector

Descendant selector: Div p a

Sub-selector: div>p

Brother Selector: P+ul

Universal selector: P~a

The universal selector and sibling selector are all selected for the same level of sibling selector

The only difference is that the brother selector chooses the next sibling, the Universal selector is the one behind all the siblings.

Child selector, sibling selector, Universal selector: ie7+ Support

Third, pseudo-class selector

1. Dynamic pseudo-Class selector

The E:link matching element defines that the hyperlink has not been accessed

The e:visited matching element defines the hyperlink and is accessed

E:hover mouse rests on element E

E:active matching elements are activated

E:focus matching elements get focus

which

E:active, e:focus:ie8+ Support,

E:HOVER:IE6 only supports link anchor points a:hover

2. Target pseudo-class selector

E:target the target element of a marker in a URL that matches a document such as: <a href= "#brand" >: Target matches an element with the ID of brand

ie9+, Opera 9.6+ support

3. Language pseudo-Class selector

E:lang matches elements that have the lang attribute set, such as:

ie8+, Opera 9.2+ support

4. Form pseudo-Class selector

e:checked matches all selected form elements

E:enabled match all available form elements

e:disabled match all disabled form elements

ie9+ Support

5. Structure pseudo-Class selector

E:first-child matches the first child element of the parent element, with E:nth-child (1)

E:last-child matches the last child element of the parent element, with E:nth-last-child (1)

E:root matches the root element of the document in which it resides

E F:nth-child (n) matches the nth child element of the parent element

E F:nth-last-child (n) matches the nth child element of the inverse of the parent element

E F:nth-of-type (n) matches the nth child element with the specified type within the parent element

E F:nth-last-of-type (n) matches the reciprocal nth child element with the specified type within the parent element

E F:first-of-type matches the first child element with the specified type within the parent element

E F:last-of-type matches the last child element within the parent element with the specified type, such as: Div a:last-of-type the last a link in the parent element div

E:only-child matching parent element contains only one child element

E f:only-of-type Matching parent element contains only one child element of the same type

E:empty matches an element that has no child elements, and the element does not contain any text nodes

ie9+ Support

The parameter n, which can be integers (1, 2, 3), keywords (odd, even), formula (2n+1)

When parameter n is a specific value, n is always calculated from 1

When parameter n is a formula, n is calculated starting from 0

Odd Select cardinality when parameter is keyword, even select even

6, negative pseudo-class selector

E:not (f) matches all E elements except the element f

ie9+ Support

7. Pseudo-Elements

:: First-letter used to select the first letter of a block of text

:: First-line The first line of text used to select a block of text

:: Before refers to the location of the additional insert (before)

:: After refers to the location of the extra insert (after), typically used with content

:: Selection matches highlighted text

Ie6~8 only supports the single colon notation, and the other browser single and double colons support

:: selection:ie9+, Firefox needs to add the private property "-moz", and the pseudo-element only accepts two attributes: background, color

Iv. attribute Selector

such as: title= "Aalink Bblink"

[attr] is used to select the element with the specified attribute. [title] selects all elements with the title attribute

[attr=val] is used to select an element with the specified attribute and value, and this value must be all. [title= "Aalink Bblink"]

[attr~=val] is used to select the element in the attribute value that contains the specified vocabulary. This word must be the complete word [title~= "Aalink"] Select the element with the title attribute with the Aalink word in the attribute

[attribute|=value] is used to select an element with an attribute value that begins with the specified value, which must be the entire word. [title|= "AA"] selects all elements with the title attribute beginning with AA or aa-

[attribute^=value] matches the property value to specify each element at the beginning of the value. [title^= "AA"] selects all elements with the title attribute beginning with AA

[attribute$=value] matches the property value to specify each element at the end of the value. [title$= "link"] selects all elements with the title attribute ending with link

[attribute*=value] matches each element of the property value that contains the specified value. [title*= "AAL"] Select an element with the AAL letter in the attribute with the title attribute

ie7+ Support

Five, ie low version solution

1. Using SELECTIVIZR

http://selectivizr.com/

page, use

<!--[if (GTE IE 6) & (LTE IE 8)]>
<script type= "Text/javascript" src= "Selectivizr.js" ></script>
<! [endif]-->

2. Using Ie7-js

http://dean.edwards.name/ie7/overview/

Download: https://code.google.com/p/ie7-js/downloads/list

page, use

<!--[If Lt IE 9]>
<script src= "http://ie7-js.googlecode.com/svn/version/2.1 (beta4)/ie9.js" >ie7_png_suffix= ". PNG"; </ Script>
<! [endif]-->

Six, each browser private prefix

Firefox:-moz-

Opera:-o-

IE:-ms-

Chrome:-webkit-

CSS3 Selector, low version solution and individual browser private prefixes