Quickly master the three features of CSS

Going straight to the theme, the three major characteristics of CSS: inheritance, cascading, and priority

1. Inheritance

Role: Some attributes set to the parent element, child elements and descendant elements are also entitled to use

Note: Not all attributes can be inherited, only  the attributes starting with color / font- / text- / line can be inherited


   <style>            div{                color: blueviolet;                font-size: 20px;                text-align: center;                line-height: 20px;                background-color: burlywood;            }        </style>    </head>    <body>        <div>            <span>我是span</span>        </div>    </body>

I added style attributes such as color/font-size/line-height/text-align/background-color to the parent element div of the span, and we turned on the F12 browser developer mode

Quickly master the three features of CSS

We can see the  sentence Inherited from div , which means  inherited from div  , and other style attributes except background-color are displayed in a highlighted state, which proves that only some styles of CSS inheritance can be inherited.

Here is another reminder to readers: The text color and underline of the a tag cannot be changed by inheritance, and the text size of the h tag cannot be changed by inheritance.

Second, cascading

Function: A way to deal with conflicts of style attributes, cascading only when multiple selectors select " same label " and then set " same attributes " will our cascading


<style>            span{                color: cadetblue;            }            span{                color: chartreuse;            }        </style>    </head>    <body>        <div>            <span>我是span</span>        </div>    </body>

Here we have selected the span, and set the same style attribute and two different colors

Quickly master the three features of CSS

The color set for the first time is drawn with a horizontal line, which means that the color set for the first time is covered by the color for the second time.

So the question is coming? Based on what rules does the browser choose who will override whose style?

This involves our next topic  ---->

Three, priority

The role of priority is obvious: it is used to determine how to cascade

Personally summarized the three ways of judging priority

1. Indirect selection (indirect selection is inheritance)

If they are all selected indirectly, whoever is close to the target label will listen to the style.

 <style>        div ul{            color: blue;        }        div {            color: red;        }    </style>    </head>    <body>        <div>            <ul>                <li>CSS的优先级判断</li>            </ul>        </div>    </body>

Through inheritance, indirectly select the li label and set different font colors respectively

Quickly master the three features of CSS

The browser chooses to inherit from ul, this is because our ul tag is closer to our li tag than the div tag

2. Select directly, but the same type of selector

This conclusion is very simple. Whoever writes in the latter style will listen to whoever writes it. Just look at the example:

<style>        .li{            color: blue;        }        .li{            color: yellow;        }        </style>    </head>    <body>        <div>            <ul>                <li class="li">CSS的优先级判断</li>            </ul>        </div>    </body>

You can see that blue is layered by yellow, this is because yellow is written at the back

Quickly master the three features of CSS

3. Direct selection, but a different type of selector

直接说结论: id > 类 > 标签 > 通配符 >浏览器默认

 <style>        #li{            color: red;        }        .li{            color: blue;        }        li{            color: yellow;        }        </style>    </head>    <body>        <div>            <ul>                <li class="li" id="li">CSS的优先级判断</li>            </ul>        </div>    </body>

Quickly master the three features of CSS

看结果可知,只有id选择器活下来了 =.=


其实,优先级问题还没说完,接下来补充两点:!important 和 权重



注意!!! !important 只能用在直接选中身上!!!而且只能提升某个属性!!并非整个选择器!!

<style>        #li{            color: red;        }        .li{            color: blue !important;        }        </style>    </head>    <body>        <div>            <ul>                <li class="li" id="li">CSS的优先级判断</li>            </ul>        </div>    </body>

根据刚刚所讲 id >类 ,本来应该是id选中器中的属性优先级高,一旦加了!important,结果就是...

Quickly master the three features of CSS





id选择器多的优先级 > 类名选择器多的 > 标签名数量多的

<style>        #div #ul .li{            color: red;        }        #div .ul .li{            color: yellow;        }        .div .ul .li{            color: blue;        }    </style>    </head>    <body>        <div class="div" id="div">            <ul class="ul" id="ul">                <li class="li" id="li">CSS的优先级判断</li>            </ul>        </div>    </body>

Since the number of the first id selector is large, it is expressed as red

Quickly master the three features of CSS

If the number of id selectors = the number of class name selectors = the number of tag names appears, the weight will not continue to be calculated

But whoever writes in the back style will listen to whoever

[Disclaimer: The pictures and text information in this article are all reprinted from the Internet by Qianfeng Chongqing Java Training Editor. They are intended to be shared and read. The copyright belongs to the original author. If there is any infringement, please contact us to delete.

Guess you like

Origin blog.51cto.com/15128443/2675814