preface

These days, I am training for interviewers. I have taken out the front-end knowledge system I sorted out a long time ago, and I feel I have gained something new. This time I’m going to share the rules of how CSS code works.

concept

MDN definition of priority:

The browser uses priority to determine which attribute values are most relevant to an element and applies them to that element. Priority is a matching rule based on different kinds of selectors.

The final style of a Dom element on a browser page is usually the result of a combination of multiple PIECES of CSS code, as shown belowdivthefont-sizeProperty, and finally the highest-priority code takes effect, showing what we actually see on the page.

Inline style and inline style

Inline style

<div style="color: red;" > test < / div >Copy the code

Outreach style

</div> <style> div {color: blue; } </style>Copy the code

As shown above, writing CSS code in the style attribute of an HTML tag is an inline style.

Writing CSS code in a

tag, or in a.CSS file introduced with the tag, is an external style.

Inline styles take precedence over inline styles, which means that if you set an attribute of the same DOM element in the inline style and the inline style, the inline style overrides the inline style.

! important

There is only one exception to this attribute, and that is! important

div { color: red ! important; }Copy the code

Add to the end of any CSS property! Important maximizes the priority of this attribute, and even an inline style can override an inline style. In various front-end best practices, it is generally forbidden to use! Important, even if you have to use it, never use it in inline style, otherwise the property will never be overwritten.

External Styles (CSS selector)

Front-end development to write CSS code is mostly external style, front-end students should also know that the CSS selector priority is as follows

ID selector > Class selector (pseudo-class selector, attribute selector) > Tag selector (pseudo-element) > Generic element selector (*)

The id selector

#app {
  color: red;
}
Copy the code

Class selectors

.app {
  color: red;
}
Copy the code

Label selector

div {
  color: red;
}
Copy the code

Universal element selector

* {
  color red;
}
Copy the code

Different priorities

The following is the comparison rule of the priority of the selector. The most basic rule is to compare the priority of the selector from left to right, and to compare the priority of the previous level only when the previous level is equal.

<div class="header" id="nav"> Test </div> #nav {color: red; } .header { colro: blue; } </style>Copy the code

From this example, the last text displayed on the page is red, and the ID selector takes precedence from left to right.

<div class="header"> Test </div> <style> div.header {color: red; } .header { colro: blue; } </style>Copy the code

In this example, the final text displayed on the page is still red, compared from left to right. Both pieces of CSS code have class selectors, so continue the comparison to the right, and the code with the label selectors takes effect.

Same priority

If two pieces of CSS code have the same priority, the later they are defined when they are introduced into HTML will take effect

<div class="nav header"> Test </div> <style>. Header {color: red; } .nav { colro: blue; } </style>Copy the code

In this example, the text is blue.

Can multiple lower-priority selectors override higher-priority selectors?

From the above rules, the higher-priority selector should prevail, but the CSS rules are implemented differently by browser. In earlier versions of FireFox, 256 lower-priority selectors can override higher-priority selectors because all classes are stored as 8-byte strings. The maximum amount of h stored in 8 bytes is 255. When 256 classes are present at the same time, they spill over the edge into the ID field. As of now, this is only true with Internet Explorer.

Specific experiment can see Zhang Xinxu this blog www.zhangxinxu.com/wordpress/2…

CSSInheritance of attributes

This is usually the case when writing CSS code

<div class="container"> <span> text </span> <span> text </span> <span> text </span> <span>Copy the code

When we set the color or font-size of a parent div, the text within the SPAN tag inside the div will also get the corresponding style. This is CSS style inheritance. Not all CSS properties can be inherited. Here are some of the most common inheritable CSS properties

Font family: specifies the font family of elements. Font weight: sets the font size. Font style: defines the font style 2. Text-align: text-align: text-align: line-height: word-spacing: increasing or decreasing the spacing between words Text-transform: controls text case direction: specifies the writing direction of text color: specifies the text color 3. Border-collapse Merge table border border-collapse Sets the spacing between adjacent cell borders Table layout determines the width of the table <automatic.fixed. Inherit > 5. List layout attribute list style-type List style-position List style-position List layout attribute set 6. Quotes Sets the quote type for nested references. 7. Cursor property CURSOR: Arrows can change to the desired shapeCopy the code

What is the priority of attributes inherited from parent elements?

Here again, the question arises: If a child element inherits a higher-priority style from its parent, does it override its own lower-priority style? Look at the following example

<div id="parent"> <span class="child"> text </span> </div> > #parent {color: red; } .child { color: blue; } </style>Copy the code

The structure above, the actual result of the browser, the text will appear blue color, which leads to another rule.

Styles inherited from a parent or higher ancestor will never take precedence over styles set directly on their own

CSSPriority usage scenarios

In today’s front-end development, componentization has become the standard norm, when we call other components in our own code, either self-encapsulated or partitioned component libraries. Overwriting with high-priority CSS code is a common way to make changes to the internal styles of components that the components themselves do not provide.

The most common styling problems on the front end can be painful to solve without a knowledge of CSS priorities, but familiarity with CSS priorities allows developers to locate and resolve problems more quickly.

That’s it.