Common attributes of CSS3 (1) and css3 attributes

Common attributes of CSS3 (1) and css3 attributes
Selector attribute selector (selected by TAG attribute)

• E [attr]:Indicates that as long as the element <E> has an attribute attr, it can be selected, for example, div [class].
• E [attr = val]:Indicates that the value of the element <E> existence attribute attr is equal to val, which can be selected, for example, div [class = "val"].
• E [attr * = val]:Indicates that the value of the element <E> existence attribute attr contains val and is in any position, for example, div [class * = "text_val"]
• E [attr ^ = val]:Indicates that the value of the element <E> existence attribute attr contains val, And the start position is as follows: div [class ^ = "val_one"]
• E [attr $ = val]:Indicates that the value of the element <E> existence attribute attr contains val, and the end position is as follows: div [class $ = "two_val"]

Pseudo-class selector

• E: first-child:Select the first child element of all elements <E> (this pseudo class is easy to misunderstand and is defined in CSS2)
  • P: first-child indicates that the selector matches the first child element of any element. <p>
  • P> I: first-child indicates that the selector matches the first child element of all <p> elements <I>
  • P: first-child I indicates that the selector matches all <I> elements in the first child element of any element <p>.
• E: last-child:Select the last child element of the element (similar to E: first-child)
• E: nth-child (n ):Select the child element <E> of all elements, and the <E> element complies with the rules set by n.
  • E: nth-child (3): Select 3rd child elements <E>
  • E: nth-child (n): select all sub-elements <E> because n follows linear variation, from 0, 1, 2, 3, 4 ...... When n <= 0, the selection is invalid.
  • E: nth-child (2n-1): select all the odd numbers. <E>
  • E: nth-child (-n + 5): select the first five <E> Note: E: nth-child (5-n ).
  • E: nth-last-child (-n + 5): select the last five <E>
  • E: nth-child (even): select all even child elements <E> supplement: E: nth-child (odd) All odd
• E: empty:Select the <E> element without any content, including Spaces
• E: target:Used in combination with the anchor, the elements of the current anchor will be selected
• Other uncommonly used pseudo-class selectors such:: Nth-of-type (),: Nth-last-of-type (),: First-of-type,: Last-of-type,: Only-child,: Only-of-typeAnd so on

Pseudo element Selector

• E: before, E: after:<E> Create an element from the beginning and end of an element. The element is an element in the row and must be used in combination with the content attribute.
  Note: In earlier versions, these two selectors are pseudo-class selectors (the concept of pseudo elements does not exist). In new versions, E: before and E: after are automatically recognized as E :: befote, E: after

• E: first-letter:The first letter or text of the text.
• E: first-line:The first line of text
• E: selection:Selected text style

 

Color

• Rgba (0, 0, 0.1 ):Color space, A new color representation, where R (red), G (green), B (blue), A (alpha, opacity)
• Hsla (200, % 10, % ):H (hue, hue, value range: 0 ~ 360, where 0/360 indicates red, 120 indicates green, 240 indicates blue), S (saturation, saturation, value range: 0% ~ 100%), L (lightness, brightness, value range: 0% ~ 100%), A (alpha, opacity, value range: 0 ~ 1)
  Supplement: opacity can only be set for the entire box. The sub-box and its content inherit the opacity of the parent box, while rgba and hsla can be applied to any place where the color is set without inheritance.

 

Text shadow

• Text-shadow:Offset, ambiguity, and color (transparency) can be set separately)
  • Horizontal offset: positive value to the right, negative value to the left
  • Vertical offset: positive value downward, negative value upward
  • The ambiguity cannot be negative.
    Example:
    

    Text bulge:. tu {text-shadow:-1px-1px 1px # fff, 1px 1px 1px #000 ;}
    . Ao {
    Text-shadow:-1px-1px 1px #000, 1px 1px 1px # fff;
    }

 

Box Model

• Box-sizing:In css, box-sizing is used to specify the box model. box-sizing has two values:
  • Content-box: the actual width of the box is equal to the width value and the border value plus the padding value, which is the default value.
  • Border-box: the actual width of the box is equal to the configured width value. Even if border and padding are defined, the actual width of the box is not changed.