- Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
- Address: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
table of Contents
Three major features of CSS
CSS stackability
- concept:
- The so-called stackability refers to the superposition of multiple CSS styles.
- It is the browser’s ability to handle conflicts. If an attribute is set to the same element through two identical selectors, then one attribute will cascade the other attribute at this time
- in principle:
- For style conflicts , the principle to follow is the principle of proximity . If the pattern is close to the structure, execute that pattern.
- No conflicts in styles, no cascading
- Case:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: red; font-size: 30px; } div { color: pink; } </style> </head> <body> <div> 长江后浪推前浪，前浪死在沙滩上。 </div> </body> </html>
CSS inheritance
- concept:
- Child tags inherit certain styles of the parent tag, such as text color and font size.
- To set an inheritable property, just apply it to the parent element.
- The simple understanding is: the son inherits the father's inheritance
- Note :
- Proper use of inheritance can simplify the code and reduce the complexity of CSS styles . For example, there are many children who need a certain style, you can assign one to the parent, and these children will inherit it.
- Child elements can inherit the style of the parent element ( text-, font-, line- these elements can be inherited at the beginning, and the color attribute )
- Case:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: yellow; } </style> </head> <body> <div> <p>博人</p> </div> </body> </html>
CSS priority (emphasis)
- concept:
- When defining CSS styles, two or more rules are often applied to the same element. At this time,
- If the selectors are the same, cascade is performed
- Different selectors will cause priority issues
Weight calculation formula
- Regarding CSS weights, we need a set of calculation formulas to calculate, this is CSS Specificity (specificity)
Label selector Calculation weight formula Inherit or * 0,0,0,0 Each element (tag selector) 0,0,0,1 Each class, pseudo class 0,0,1,0 Each ID 0,1,0,0 Each inline style style="" 1,0,0,0 Every !important important ∞ infinity
- The value is from left to right, the largest on the left, the first level is greater than the first level, there is no base between the digits, and the levels cannot be surpassed.
- Regarding CSS weights, we need a set of calculation formulas to calculate, this is CSS Specificity (specificity)
div { color: pink!important; }
- Case: CSS priority
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*div { color: red; }*/ /*标签选择器 权重 0,0,0,1 小组长*/ div { color: pink!important; } /*类选择器 权重 0,0,1,0 班长*/ .one { color: blue; } /*id 选择器 权重 0,1,0,0 班主任*/ #two { color: green; } /*style= 行内样式表 权重 1,0,0,0 校长*/ /*!important 在样式属性的后面添加 权重最高 ∞ 教育局局长*/ </style> </head> <body> <div class="one" id="two" style="color: yellow;"> 权重还有30秒到达战场 </div> </body> </html>
Weight overlap
- We often use intersection selectors, descendant selectors, etc., which are composed of multiple basic selectors, then at this time, there will be overlapping weights.
- Is a simple addition calculation
- note:
There is no base between the digits, for example: 0,0,0,5 + 0,0,0,5 =0,0,0,10 instead of 0,0, 1, 0, so there will be no 10 divs Can catch up with a class selector.
- Case: Overlapping rights
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*出现了权重叠加的现象 */ /*.nav a 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */ .nav a { color: red; } /*.first 权重 0,0,1,0*/ /*.first { color: pink; }*/ /*0020*/ .nav .first { color: pink; } /*0,0,0,5 + 0,0,0,5 = 0,0,0,10*/ </style> </head> <body> <div> 人生四大悲 </div> <div class="nav"> <a href="#" class="first">家里没宽带</a> <a href="#">网速不够快</a> <a href="#">手机没流量</a> <a href="#">学校无wifi</a> </div> </body> </html>
The inherited weight is 0
- This is not difficult, but it is easy to get confused by ignoring it. In fact, when we modify the style, we must see if the label is selected .
- If it is selected, the weight is calculated according to the above formula. Who listens to whom .
- If it is not selected, the weight is 0, because the inherited weight is 0
- Case: The inherited weight is 0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: red; } p { color: green; } /*因为demo 没有选p标签，所以 继承的权重为 0*/ .demo { color: blue; } #test { color: pink; } </style> </head> <body> <div class="demo" id="test"> <p>继承的权重为 0</p> </div> </body> </html>
