Selector Property Selector (selected by Tag properties)
- e[attr]: indicates that attr can be selected as long as the element <E> existence attribute is: Div[class]
- E[attr=val]: represents the element <E> existence attribute attr value equals Val, which can be selected as: Div[class= "Val"]
- E[attr*=val]: indicates that the value of element <E> existence attribute attr contains Val, and is in any position such as: div[class*= "Text_val"]
- E[attr^=val]: The value that represents the element <E> existence attribute attr contains Val, and at the starting position such as: div[class^= "Val_one"]
- E[attr$=val]: represents the element <E> existence attribute attr value contains Val, and at the end of the position such as: div[class$= "Two_val"]
Pseudo class Selector
- E:first-child: selects the first child element of all elements <E> (this pseudo-class is easily misunderstood 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 means 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): selects the child element of all elements <e>, and the <E> element is a rule that conforms to n
- E:nth-child (3): Select the 3rd child element <E>
- E:nth-child (n): Selects all child elements <e>, because n follows a linear change from 0,1,2,3,4 ... When n<=0, select invalid
- E:nth-child (2n-1): Check all the odd <E>
- E:nth-child (-n+5): Select the top 5 <E> Note: E:nth-child (5-n) is not useful for writing
- E:nth-last-child (-n+5): Selected after 5 <E>
- E:nth-child (even): Select all the even-numbered sub-elements <E> supplement: E:nth-child (Odd) all the odd
- e:empty: Select the <E> element without any content, including spaces
- e:target: used in conjunction with an anchor point, the element is selected for the current anchor point
- Other infrequently used pseudo-class selectors such as: : Nth-of-type (),: Nth-last-of-type (),: First-of-type,: Last-of-type ,: Only-child,: Only-of-type , etc.
Pseudo element Selector
- E::before,e::after: the start and end of the <E> element creates an element that is an inline element and that is used in conjunction with the Content property
Special Note: These two selectors are pseudo-class selectors (without the concept of pseudo-elements) in the old version, and E:before,e:after will be automatically recognized as E::befote,e::after in the new version.
- E::first-letter: The first letter or text of a text
- e::first-line: first line of text
- e::selection: style of selected text
Color
- Rgba (0,0,0,0.1): color space, a new way of representing colors, where r (Red), G (green), B (blue), a (alpha, opacity)
- Hsla (200,%10,%10,1): H (hue, hue, value range 0~360, where 0/360 means red, 120 for green, 240 for blue), S (saturation, saturation, range 0%~100%), L (lightness, brightness, range 0%~100%), A (alpha, opacity, value range 0~1)
Added: Opacity (opacity) can only be set for the entire box, the sub-box and its contents inherit the opacity of the parent box, and the Rgba,hsla can be applied to any color setting and is not inherited
Text Shadow
- Text-shadow: can set offset, blur, color (can be set transparency)
Box model
- box-sizing: The box model is specified by box-sizing in CSS, and box-sizing has two values, respectively:
- Content-box: The actual width of the box is equal to the width value plus the border value plus the padding value, which is the default value
- Border-box: The actual width of the box is equal to the width value of the setting, and even if border and padding are defined, the actual width of the box is not changed.
Common Properties of CSS3 (i)
