This is the 8th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

1. What are Css selectors

Css2 selector:

Element selector, ID selector, Group selector, Class selector, * wildcard selector, descendant selector

Css2 pseudo-class selector:

a:link/visited/hover/active

CSS 3 selector

  • Space >
  • + adjacent sibling selector
  • ~ Universal selector (find all that follows)

Structure pseudo-class selector:

  • Find nth-child (n)
  • Find the number of nTH-of-types of the same type
  • Find the only type only-of-type

Attribute selector: find by tag attribute [attr=value]

  • : root Finds the HTML tag of the root element
  • : empty Searches the empty label

Target pseudo-class selector :(form)

  • : enabled Finds available labels
  • : disabled Searches for forbidden labels
  • : Checked Looks for the selected label

Negate the pseudo-class selector not ()

2. Those attributes can be inherited

Css inheritance features are mostly textual:

All elements are inheritable: block elements are inheritable: text-indent and text-align list elements are inheritable: List style, list style-type, list style-position, list style-image Inline elements can be inherited: Font-size: 16px; word-spacing: 15px; word-spacing: 16px; word-spacing: 16px; word-spacing: 16px; word-spacing: 16px; word-spacing: 16px; Text-decoration, text-transform, direction Letter space Paragraph space Line height Font Color Font type Font Size Font Sample Font Thickness Small uppercase letters Text Modifies text directions in different elements

3, the weight

Priority (weight) :

  • Element selector 1
  • Pseudo-element selector 1
  • Class selector 10
  • Pseudoclass selector 10
  • Property selector 10
  • Id selector 100
  • The inline style has a weight of 1000
  • The inclusion selector weights are the sum of the weights
  • Inheritance style weight is 0

Priority order:

  • Id selector > Class selector > label selector;

  • When there is a hierarchical containment relationship between tags, descendant elements inherit the style of their ancestors. If the descendant element defines the same style as the ancestor element, the same style attribute of the ancestor element is overwritten.

  • With! The style attribute of the important tag has the highest priority;

  • Depending on the source of the style sheet, the order of priority is inline style > Internal Style > External Style > Browser User Defined Style > Browser Default style

How to calculate the priority:

Specificity or specificity of a CSS, it is a criteria for determining the priority of a CSS. Since the criteria has criteria and calculation method, a four-digit sequence is more like four levels of specificity from left to right, the largest level of left, one greater than one level, there is no base between digits. When multiple selectors are applied to the same element, the one with a high value is given priority.

When multiple selectors are present at the same time, the value of each selector is added bit by bit. {there is no base between digits. For example: 0,0,5 + 0,0,0,5 =0,0,0,10 instead of 0,0,1,0} gives the final calculated specificity and is then compared bit by bit in left-to-right order when comparing a choice.

For example:

1.div { font-size:12px; } : 1 element {div}, full value = 0,0,0,1; } : 3 elements {body div p},0,0,3 3. div.sjweb {font-size:12px; } analysis: 1 element {div},0,0, 0,1 1 class selector {.sjweb},0,0,1,0 Div # sjweb {font-size:12px; } analysis: 1 element {div},0,0, 0,1 1 class selector {.sjweb},0,1,0 HTML > Body div [ID = “total”] ul li > P {color:red; } analysis: {[ID = “total”]} full = 0,0,0, 0,0, 2 other selectors {> >} Full value: 0,0,0 final value: 0,0,1,6

4. The difference between Px, REM and EM

Px is a unit of em length relative to the screen resolution of the display. Em is not fixed relative to the font size of the current text in the object. Em inherits the font size of the parent element (reference is the font size of the parent element). All fonts in EM are rem relative to the font size of the parent element relative to the HTML root element