What types of css style sheets are there? What is selector priority?

There are three types of css style sheets: inline style sheets, internal style sheets and external style sheets. The selector priority is: "Universal selector>Element selector>Class selector>Attribute selector>Pseudo-class>ID selector>Inline style".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

What are the types of css style sheets?

According to the position where the CSS style is written (or the way it is introduced), CSS style sheets can be divided into the following three categories:

1. Inline style sheets

Inline style is to put the CSS style directly in the tag within the line of code. It is usually placed in the style attribute of the tag. Since the inline style is directly inserted into the tag, it is the most direct way. method, and it is also the most inconvenient style to modify.

Example:

<p style="background-color: #999900">行内元素，控制段落-1</p>

2. Internal style sheet

The internal style sheet is contained in the c9ccee2e6ea535a969eb3f532ad9fe89 tag, a 6e1a4467d5acc8df5ef5c3c6a55bf61c tag represents an internal style sheet.

If a web document contains multiple c9ccee2e6ea535a969eb3f532ad9fe89 tags, it means that the document contains multiple internal style sheets.

Example:

<style>
div {
color: blue;
font-size: 16px;
}
</style>

3. External style sheet

If the CSS style is placed in a file outside the web page document, it is called an external style. table, a CSS style sheet document represents an external style sheet.

In fact, the external style sheet is a text file with the extension .css. When you copy the CSS style code into a text file and save it as a .css file, it is an external style sheet.

In the HTML page, use the 9b3737d50531bee70b4389e7b6fabf02 tag to introduce the file. The specific introduction code is as follows:

<link rel="styleheet" href="css文件路径">

Priority of multiple style sheets:

Inline style inline style > Internal style sheet > External style sheet External style sheet > Browser default style

The following is an explanation of selector priority and an explanation of weight It's good, so I excerpted it from the novice tutorial

Priority is determined by the browser and applied to the element by judging which attribute values ​​​​are most relevant to the element. The priority is determined only by the matching rules composed of selectors.

Priority is a weight assigned to a specified CSS declaration, which is determined by the value of each selector type in the matching selector.

What is the selector priority?

The following is a list of selectors with increasing priority:

• Universal selector (*)
• Element (type ) selector
• Class selector
• Attribute selector
• Pseudo class
• ID selector
• Inline style

!important rule exceptions

When the !important rule is applied to a style declaration, the style declaration overrides any other declaration in CSS, no matter where it is in the declaration list . However, !important rules have nothing to do with priorities. Using !important is not a good practice because it changes the original cascading rules of your stylesheet, making it difficult to debug.

Some rules of thumb:

• ##Always To optimize consider using the priority of style rules to solve the problem instead of !important
• Only Use only in specific pages that need to cover the entire site or external css (such as referenced ExtJs or YUI) !important
• Never Never use in site-wide css !important
• Never Never use !important ## in your plugins
#Weight calculation:

Explanation:

• 2. The weight of the ID selector is 100
• 3. The weight of the Class selector is 10
• 4. The weight of the HTML tag selector is 1
• Use the weight of the selector to calculate and compare, em displays blue, the example is as follows: https://c.runoob.com/codedemo/3048

CSS priority rule:

• A Each selector has a weight, the greater the weight, the priority;
• B When the weights are equal, the style sheet that appears later Settings should take precedence over the style sheet settings that appear first;
• C The creator’s rules are higher than those of the viewer: that is, the CSS style set by the web page writer has priority over the style set by the browser;
• D The inherited CSS style is not as good as the CSS style specified later;
• E The rule marked with "!important" has the highest priority in the same set of property settings; the example is as follows: https://c.runoob. com/codedemo/3049
  Result: Displayed in blue under Firefox; Displayed in red under IE 6;

Here is a popular CSS weight relationship diagram:

(Learning video sharing: css video tutorial)

The above is the detailed content of What types of css style sheets are there? What is selector priority?. For more information, please follow other related articles on the PHP Chinese website!