CSS3_01, css3 Animation

CSS3_01, css3 Animation

1. sibling selector: ① adjacent sibling selector: The last sibling element of the element. selector 1 + selector 2; ② universal sibling selector: All sibling elements after the element, selector 1 ~ Selector 2;

2. Attribute selector: attr indicates the attribute name, and elem indicates the element name; ① [attr]: All elements with the attr attribute on the page; ② elem [attr]: all elem elements with attr attributes on the page; ③ elem [attr1] [attr2]… : All attributes on the page that contain both the attr1 attribute and the attr2 attribute ...... (4) elem element; (4) elem [attr = value]: All elem elements with the attr attribute and whose value is value; (5) elem [attr ~ = Value]: All elem elements with the attr attribute and whose value list contains the independent value (mostly used for element class attributes); ⑥ elem [attr ^ = firstchar]: all elem elements with the attr attribute and whose value starts with firstchar (a letter or string) on the page; 7elem [attr $ = lastchar]: all elem elements with attr attributes and whose values end with lastchar (a character or string) on the page; cancelem [attr * = everchar]: all elem elements with attr attributes and whose values contain everchar (one character or string) characters on the page;

3. Target pseudo class :~ : Target to highlight html anchors;

4. pseudo element status: ① ~ : Enabled, each enabled element; ② ~ : Disabled, each disabled element; ③ ~ : Checked, each selected element (single choice/check box );

5. Structure pseudo class: ① ~ : First-child, the first child element of its parent element; ② ~ : Last-child, the last child element of its parent element; ③ ~ : Nth-child (n), nth child element of its parent element; ④ ~ : Empty, all elements without child elements (no child elements, no content, no space to wrap); ⑤ ~ : Only-child, which is the only child element in its parent element;

6. Negative pseudo class :~ : Not (selector), which contains all elements that do not meet the selector;

7. pseudo element selector: ① ~ : First-line or ~ : First-line, the first line of the element; ② ~ : First-letter or ~ : First-letter, the first character of the element; ③ ~ : Selection. The selected area of the user under this element;

8. counter: ① Declaration/reset counter: counter-reset: counter name value; (* value can be saved; default value: 0; multiple statements can be declared at a time, counter-reset: name 1 value 1 name 2 value 2 ......; Counter declaration cannot be placed on the used element;); ② counter increment: counter-increment: counter name increment value; (* It cannot be saved. The default value is 1, which is placed in the used element ;); ③ counter call: counter (counter name); (put in the call element );

9. content generation: ① selector: before AND: after, before/after the location is generated; ② attribute: content, inserted content; Value: url () (insert image) /string ("plain text")/Counter (regular number );

10. Multiple columns: ① split column: column-count: Number; ② column interval: column-gap: Number px; ③ column rule: column-rule: wide style color; (* That is, the column interval border style); ④ compatibility: IE10 +, supported by Opera;

11. CSS Hack: ① inside the CSS class: Adding prefix to style rules;-: IE6; +: IE7; ② selector: Prefix: *: IE6; * +: IE7; ③ header reference: <! -- [If condition IE version]> content ...... <! [Endif] -->; (* condition: a, gt: greater than; B, gte: greater than or equal to; c, lt: less than; d, lte: less than or equal ;! Non-IE;); ④ media query: @ media screen {};