CSS Selector Summary

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.