CSS3 New Property 02

CSS3 Selector Base Selector

• Wildcard selector *
• Id selector #Id
• Class selector. classname
• Element selector TagName
• Group Selector Slecter,selecter

Hierarchy Selector

• Descendant Selector Selecter Selecter
• Child element Selector Selcter>selecter
• Adjacent Brother selector Selecter+selecter
• Wildcard Brother Selector Selecter~selecter

Property Selector

• SELECTER[ATTR] element containing the Attr property
• Selecter[attr=val] attr attribute value is a VAL element
• Seldcter[attr^=val] attr attribute value is an element that begins with Val
• Selecter[attr$=val] attr attribute value is the element that ends in Val.
• Selecter[attr~=val] attr attribute value Val or contains Val (two values separated by a space, one of which is Val)
• Selecter[*=val] attr The element containing Val in the property value
• Selecter[|=val] Attr property value is Val or value is val=*

Pseudo class Selector

• Dynamic Pseudo class Selector

  • : hover
  • : Link
  • : Visited
  • : Active
  • : Focus

• Target Pseudo class Selector

  • : Target

• Language pseudo-Class selector

  • : lang (CH)

• UI element pseudo-class Selector

  • : Enabled matches form elements that are in a usable state on the user interface
  • :d iabled matching form elements that are in a prohibited state on the user interface
  • e:checked matches the selected element e in the user interface. (used when input type is radio and checkbox)

• Structure pseudo-Class selector

  • : root root element selector. In HTML, the root element is always html
  • E:first-child matches the first child element of a parent element
  • : Last-child matches the last child element of the parent element
  • Nth-child (n) matches the nth child element e of the parent element, assuming that the child element is not E, the selector is invalid
  • Nth-last-child (n) matches the parent element's reciprocal nth child element E, assuming that the child element is not E, the selector is invalid
  • Only-child matches parent element with only one child element e
  • First-of-type matches the first sibling element in the same type
  • Last-of-type matches the last sibling element in the same type
  • Nth-of-type (n) matches nth sibling in the same type
  • Nth-last-of-type () matches the reciprocal nth sibling of the same type
  • Only-of-type () matches the only sibling element in the same type
  • Empty matches a null element (cannot have child elements and cannot have content)

• Negation pseudo-Class selector

  • Not (Selecter)

Pseudo element Selector

• : First-letter/:: First-letter First letter
• : First-line/:: First-line First line
• : Before/:: Before sets what happens before the object and is used with the content property, followed by text or pictures. The content that is usually added by default is inline element
• : After/:: After setting what happens after the object,
• ::p Laceholder style for setting object text placeholders
• :: Selection style when setting objects to be selected

CSS new border properties rounded corners

• Border-radius Sets or retrieves objects using rounded borders. 2 parameters are provided, 2 parameters are separated by "/", each parameter is allowed to set 1~4 parameter values, the 1th parameter represents the horizontal radius, the 2nd parameter represents the vertical radius, and the 2nd parameter is omitted, the default equals the 1th parameter horizontal radius: If you provide all four parameter values, you will press the left (Top-left), The order of the upper right (top-right), lower right (bottom-right), lower left (bottom-left) is used for Four corners. If only one is provided, it will be used for all four corners. If two is provided, the first one is for upper left (top-left), lower right (bottom-right), and the second is for upper right (top-right), lower left (bottom-left). If three is supplied, the first is used on the left (Top-left), the second is for the upper right (top-right), the lower left (Bottom-left), and the third for the bottom right (bottom-right). The vertical radius also follows the 4 points above. The corresponding script attribute is Borderradius.

• Border-top-left-radius

• Border-top-right-radius
• Border-bottom-left-radius
• Border-bottom-right-radius

Box Shadow

• Box-shadow:length1,length2,length3,length4,color, inset
• Length1: Used to set the shadow horizontal offset value of an object, which can be negative
• Length2: Used to set the shadow vertical offset value of an object, which can be negative
• LENGTH3: Used to set the shadow blur value of an object and cannot be negative
• LENGTH3: Used to set the shadow Epitaxial value (shadow width) of an object, not a negative value
• Color: Used to set shadow colors
• Inset sets the shadow object for the object to be an outer shadow. When the value is empty, the shadow type of the object is an outer shadow

CSS3 New Property 02