CSS Selector Summary

One, Syntax: selector + one or more declarations; selector {declaration1; declaration2; ... declarationn};

Second, selector classification:

1. Element selector (type selector): element {}

2. Class Selector: class name {} or element. Class Name {} or. class name 1. Class name 2.~~ (multi-class selector)

3. ID selector: #id名 {} or #id element {} or element #id{}

Although an element labeled as an ID name can only appear once in a document, this ID selector may be used many times as a derived selector

4. Property selector: [Property]={} or [property = property Value]{} [Property ~= property Value]{} (all elements that contain the specified property value are set style for space style) or [Property |= property Value]{} (contains attribute values, applies to hyphens, and the letters before hyphens must be the same) or input[ Type= ""]{} (Modify the style of the form)

-You can set the style for the HTML element that owns the specified property, not just the class and ID attributes;

-only in the rules! DOCTYPE, IE7 and IE8 only support attribute selectors;

-A[HREF] applies styles only to anchors with href attributes (a element);

-img[alt] can apply styles to all images with ALT attributes to highlight these valid images;

5. Pseudo-class selector: Used to add special effects to certain selectors

-Syntax: selector:pseudo-class {property:value}

Example: A:hover (mouse over) a:visited (visited) A:link (not visited) a:active (selected link)

The order must be: link--visited--hover--active

-Pseudo-class and class-sharing: Example: A: Class name hover

-first-child: The first child element of an element (the first occurrence of an element in the code)

Example: Match the first element: an element. first-child

Match the first I element in the P element: P>i:first-child

Match all I elements in P element: P:first-child I

-:lang:: lang Pseudo-class gives you the ability to define special rules for different languages

Cases:q:lang(no){quotes: "~" "~"}（，:lang 类为属性值为 no 的 q 元素定义引号的类型：）

-. Focus: Adds a style to the element that has keyboard input focus.

6, Pseudo-element selector:

-Syntax: selector:pseudo-element {property:value;}

-first-line: element: First-line (pseudo-element used to set a special style to the first line of text.) Only for block-level elements)

-first-letter: element: First-letter (special style is set to the first letter of the text)

-element: Before: Add new content before element (Content=url ())

-element: After: Add new content after element (Content=url ())

-Pseudo elements and classes: Elements. Class Name: Pseudo element

7. Derivation Selector

7.1 Descendant Selector (that is, contains selectors): element descendant element {}

7.2 child element selectors (only elements that are child elements of an element): Elements > Child elements

7.3 Adjacent Sibling selectors (select the element immediately after the other element, and both have the same parent element) element + The element immediately after the element

8. Wildcard selector: *{}

9. Selector grouping: comma-linked

CSS Selector Summary