CSS Notes 3

Source: Internet
Author: User

  • CSS multi-class selectors, by linking two class selectors together, you can select only the elements that contain these class names (the order of class names is unlimited).
    <class= "Important warning">Thisparagraph is a very important Warning. </ P > . Important {font-weight:bold;}. Warning {font-style:italic;}. important.warning {background:silver;}  These two classes are also included

  • The difference between class selector and ID selector:

    Can only be used once in a document, unlike a class, in an HTML document, the ID selector is used once, and only once.

    The ID word list cannot be used, unlike the class selector, which cannot be used in combination because the id attribute does not allow a space-delimited list of words.

  • Select based on partial attribute values:

    If you need to select from a word in the list of words in the attribute value, you need to use the tilde (~).

    Assuming you want to select the element that contains important in the class attribute, you can do this with this selector:

    P[class~= "Important"] {color:red;}

  • The difference between a partial-value attribute selector and a point-number class name notation is that p.important and p[class= "important" are equivalent when applied to an HTML document. Why do you have a "~=" property selector? Because it can be used for any property, not just class.
  • Selector
    SelectorDescription
    [attribute] Used to select an element with the specified attribute.
    [attribute=value] Used to select an element with the specified attributes and values.
    [attribute~=value] Used to select the element in the attribute value that contains the specified vocabulary.
    [attribute|=value] Used to select an element with an attribute value that begins with the specified value, which must be the entire word.
    [attribute^=value] Matches each element of the property value to the beginning of the specified value.
    [attribute$=value] Matches each element of the property value to the end of the specified value.
    [attribute*=value] Matches each element of the property value that contains the specified value.
  • In the descendant selector, the selector end of the left side of the rule includes two or more selectors separated by spaces. The space between selectors is a binding character (Combinator). Each space-bound character can be interpreted as "... In... Find "," ... As... Part of the "," ... As... , but requires that the selector must be read from right to left.
  • Syntax for pseudo-classes:
    Selector:pseudo-class {Property:value}

    Selector.class:pseudo-class {Property:value}  //class is used with pseudo-class

    Note: <! must be declared Doctype>, this way: First-child can be effective in IE.

  • Syntax for pseudo-elements:
    selector:pseudo-element {property:value;}

  • CSS2-: Before pseudo element
    H1:before  {  content:url (logo.gif);  }

  • Use the margin property to align horizontally. Note: unless already declared! DOCTYPE, otherwise the use of Margin:auto is not valid in IE8 and earlier versions.

CSS Notes 3

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.