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
Example:
<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
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
Example:
<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
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
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
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>
看结果可知，只有id选择器活下来了 =.=
其它的读者们可以下来再试一试..
其实，优先级问题还没说完，接下来补充两点：!important 和 权重
一、!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，结果就是...
二、权重
当多个选择器混合在一起使用时，需要通过计算权重来判断优先级
那么全重怎么判断呢！？
计算规则：看数量
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
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. 】