CSS3 selector usage summary, css3 selector Summary

CSS3 selector usage summary, css3 selector Summary

CSS3 selector Summary

A general Selector

1 * {} wildcard selector (CSS2): Applicable to All element objects.

2 E type (HTML) selector (CSS1): uses the DOM of the document language object type as the selector.

3 E # myid is the id selector (CSS1): use the E object with the unique identifier id property equal to myid as the selector.

4 E. myclass is the class selector (CSS1): Use the class attribute to include the E object of myclass as the selector.

5 e f: contains the selector (CSS1): Selects all F elements contained by the Eelement.

The common selector added by CSS3: the common selector of the same level element:

1. General selector E ~ F {}: matches all the F and EF at the same level after the E element. As long as F is behind E, E is just a reference. E ~ F {background: # ff0 ;}

2 adjacent (adjacent) selector (css2): E + F {}: EF elements are adjacent, that is, F elements are selected after the Eelement.

3 contains (sub) selector (css2): E> F {}: EF can not be substituted, and E can only match to the next adjacent generation F.

Binary Attribute Selector

1. E [att ^ = "val"]: select an Eelement of a string with the att attribute and the attribute value starting with val.

2. E [att $ = "val"]: select an Eelement with the att attribute and the attribute value is a string ending with val.

3. E [att * = "val"]: select an Eelement with the att attribute and the attribute value is a string containing the val.

4. E [att | = "val"] select the Eelement of a string with the att attribute and the attribute value starting with val and separated with the connector.

5. E [att] Select an Eelement with the att attribute.

6. E [att = "val"] Select an Eelement with the att attribute and the attribute value is equal to val.

7. E [att ~ = "Val"] Select a list of words with the att attribute and the attribute value is a space-separated word list, with an Eelement equal to val.

Note: 4 ~ 7 is a property unique to CSS2. The most common attribute selector of input.

Triplicate Selector

1. pseudo classes related to the user interface:

(1) E: enabled: matches the activated elements in the form and the operable elements in the form.

(2) E: disabled (commonly used): it is used to match the disabled element disabled = "disabled" in a form ". Eg: input [type = "text"]: disabled {background: # ddd;} can only be viewed as unavailable.

(3) E: checked: matches the selected radio (single-choice) or checkbox (check box) elements in the form.

Is the overall pseudo class (matching the entire DOM document ):

(4): The selection matches the selected elements of the user, that is, the color of the selected object. : Selection.

2. Structured pseudo-classes

1): root matches the root element of the document. For HTML documents, only HTML root elements can be matched.

2) E: nth-child (n) matches its current element.

E: nth-child (n): matches the nth child element of its parent Element E. The first child element is 1.

E f: nth-child (n): matches the nth F element of the parent Element E, and the first number is 1 (it seems only available for ul)

3) E: nth-last-child (n): matches the nth child element of the parent element. The first child element is numbered 1.

E: last-child: matches the last child element of the parent element, which is equivalent to nth-last-child (1 ).

4) E: nth-of-type (n): it is similar to nth-child (n), but only matches the elements that use the same label.

5) E: nth-last-of-type (n): it is similar to nth-last-child (n), but only matches the elements that use the same label.

6) E: first-of-type: match the first child element that uses the same label under the parent element, equivalent to: nth-of-type (1 ).

7) E: last-of-type: matches the last child element that uses the same label under the parent element, which is equivalent to nth-last-of-type (1 ).

8) E: only-child: matches only one child element of the parent element ..

9) E: only-of-type: matches the unique child element under the parent element that uses the same tag, which is equivalent to: first-of-type,: last-of-type or: nth-of-type (1),: nth-last-of-type (1 ).

10) E: empty matches an element that does not contain any child element. Note that text nodes are also considered as child elements, and blank nodes are also considered as child nodes.

11) E: not (s) matches any element that does not match the current selector: not (: nth-child (1 )).

3

1) E: link {}: link pseudo-class selector. Set the style of Hyperlink a before being accessed.

2) E: visited {}: link pseudo-class selector. Set the style of Hyperlink a when its link address has been accessed.

3) E: hover {}: Specifies the pseudo-class selector for user operations, and sets the style of an element when it is hovering over it.

4) E: active {}: user operation pseudo class selector, set the style of the element when it is activated by the user (events occurred between mouse clicks and release.

5) E: focus {} user operation pseudo class selector, set the style of the element when it becomes the input focus (the onfocus event of this element occurs.

6) E: lang {}: pseudo class selector, matching the Eelement in a special language.