How CSS works (for tags with repeated styles, which style will the browser choose)_html/css_WEB-ITnose

For example, the tag P may have related attribute values ​​set multiple times in embedded style sheets and external style sheets (such as color: red;/color: blue). So which value does the browser use to display the style of P? ? ? This is how CSS works. (The degree of specificity is more important)

CSS has three working mechanisms: 1. Inheritance 2. Cascading 3. Specification (The cascading principle is based on inheritance and specificity)

1. Inheritance: Ancestor elements in CSS will pass one thing to descendants: the value of a CSS property. Body is the ancestor of all elements. If we specify body{color:red;}, then all elements in the document inherit this style. This is why, after we write a line of text in the Notepad program, we rename it to: xxx.html. When opened in different browsers, there will be different font effects, because each browser has its own predefined style. table, which includes the font attribute in the body, and when we open our Html with a browser, we inherit this attribute.

Of course, not all attributes can be inherited. Most of the attributes that can be inherited are related to text, such as color, font, font size, etc. Some attributes are meaningless if inherited, or will affect the layout of the page if inherited, such as those involving element positioning, margin, padding, border and other attributes.

2. Cascading: This is the C (cascading) in CSS, which is mainly based on the style source and specificity.

a) Style source: The following is the order in which the browser cascades styles from each source:

1. Browser default style sheet
2. User style sheets (for example, visually impaired users add a body{font-size:200%})
3. Developer external style sheets (in the order they are introduced into the page)
4. Developer embedded style sheet
5. Developer inline style sheet
6. Note: The order of 3 and 4 depends on the position of the c9ccee2e6ea535a969eb3f532ad9fe89 embedded style tag, and the position of the 2cdf5bf648cf2f33323966d7f58a7f3f tag , the tags at the end are selected, please see Example 2

The lower the tag, the higher the priority, which means that the browser will give priority to the style set by the later source (if it exists)

b) Specificity: It is a scoring rule for selectors. The selector with a high score will be selected. The formula has three values ​​that need to be calculated: I-C-E. The rules are as follows

1. There is an ID selector in the selector, just add 1 to I
2. There is an ID in the selector For a class selector, just add 1 to C
3. If there is a tag name in the selector, add 1 to E
4. to get a 3-digit number
5. Compare first High bit, high bit means high. For example, 1-0-0 is higher than 0-12-0, and is preferred. By analogy, if the special styles are the same, the style declared later is selected.

Selectors are also called selectors. In English, they should be selectors. There are many kinds of selectors in CSS, so I won’t go into detail here.

Give a specific example:

p	0-0-1特指度=1
p.classp1	0-1-1特指度是11
p#idp1	1-0-1特指度是101
body p#idp1	1-0-2特指度是102
body p#idp1 ul.classul1	1-1-3特指度是113
body p#idp1 ul.classul1 li	1-1-4特指度是114

Based on 3 working mechanisms, 3 rules are summarized and applicable to all situations.

1) The ID selector is larger than the class selector, and the class selector is larger than the label selector. In a word: Selectors with high specificity (more specific selections) are selected.

2) The browser reads each style sheet in the order of the html document, and the later style sheets will overwrite the styles with the same attributes of the previous style sheets. If the specificity of the following style is low, it cannot overwrite the previous style

Note: Rule 1 is stronger than Rule 2. If the specificity is high, no matter where it is (except within the line), will be selected. Inline style has the highest priority (but inline styles are generally not used, 42c0d80b735603303970f6f0b2b5acf6), followed by specificity.

3) The set style is better than the inherited style

例子1 ：id选择器优于类选择器<style>    .li1{color: red;}    #li1{color:yelow;}</style><link rel="stylesheet" href="demo.css"></head><body>    <div id="div1">        <ul class="ul1">            <li id="li1" class="li1">列表项1</li>              </ul>   </div>列表1为黄色

例子2 ：嵌入样式表和外部样式表，选哪个（主要看浏览器按顺序，后读取的会覆盖点前面读取的），相同特指度的时候<link rel="stylesheet" href="demo.css"><style>    .li1{color: red;}</style></head><body>    <div id="div1">        <ul class="ul1">            <li id="li1" class="li1">列表项1</li>（黄色）外部样式表demo.css

.li1{
color:yellow;}

c9ccee2e6ea535a969eb3f532ad9fe89The embedded style sheet comes after and is red.

如果是这个顺序，style标签在前，link在后

c9ccee2e6ea535a969eb3f532ad9fe89
.li1{color: red;}
531ac245ce3e4fe3d50054a55f265927
54598a4f7845db9f86cb57dae34a9f69
9c3bca370b5104690d9ef395f2c5f8d1

is yellow

例子3：选择特指度高的（如按顺序，应该选择link的黄色，但是style中的特指度高 1-0-2 大于 1-0-1，所以选特指度高的红色），后面读取的特指度低的就不会覆盖前面特指度高的。<style>    body div #li1{color: red;}</style><link rel="stylesheet" href="demo.css"></head><body>    <div id="div1">        <ul class="ul1">            <li id="li1" class="li1">列表项1</li>

demo.css

div #li1{
color:yellow;}

为红色

例子4：行内style有最高优先级，前面的代码不变，只在p中加了style blue,列表项立马变成蓝色虽然行内的有最高优先级，但是行内style本身就不常用（不方便移植，增加网页大小）<li id="li1" class="li1" style="color:blue;">列表项1</li>

例子5 ：设定的样式优于继承的样式，即使继承的样式特指度高（在li中加入em,em继承了li的特指度是102，em本身的特指度是001，但是仍然选em）<style>    body div #li1{color: red;}    em{ color:black;}</style></head><body>    <div id="div1">        <ul class="ul1">            <li id="li1" class="li1"><em>列表项1</em></li>            </ul>列表项为黑色。