CSS中的样式可以继承。
如果在非常顶级的元素上（比如BODY标签）定义基础样式（比如设置字体）,文档中所有元素都会应用这个样式。
Cascading is a fundamental feature of CSS. It's an algorithm defining how to combine properties values originating from different sources. The cascade algorithm is at the core of understanding and using CSS.
如何解决样式冲突？设置优先级。
- 按最新的来。
文件都是从上到下顺序解析的，所以越往下的代码优先级越高。对于external CSS link来说，就相当于把CSS文件粘贴到链接那个位置。所以external link < style标签 < inline styling。 -
越具体的选择器，优先级越高。
可以利用加权求和量化“具体性”。
图片1.png
图片2.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance in CSS</title>
<style type="text/css">
header.navigation p {
color: blue;
}
p.blurb {
color: red;
}
</style>
</head>
<body>
<header class="navigation">
<p class="blurb">
Hello world!
</p>
</header>
</body>
</html>
图片3.png
解释：两个CSS都在给这段文字加颜色。两个CSS都有一个class，然而第一个CSS有两个element，第二个CSS只有一个element，所以第一个得分胜出。
- 直接用
!important赋予最高优先级。
例外：字体的大小有不同的单位：
-
px：相对于屏幕的大小，冲突的字体大小会覆盖。
-
em：相对于父级元素的大小，冲突的字体大小会叠加！
<body> <div style="font-size: 16px;">sunboximeng <div style="font-size: 32px;">sunboximeng <div style="font-size: 16px;"> sunboximeng </div> </div> </div> </body>
图片4.png
<body>
<div style="font-size: 1em;">sunboximeng
<div style="font-size: 2em;">sunboximeng
<div style="font-size: .5em;">
sunboximeng
</div>
</div>
</div>
</body>
图片5.png
网友评论