CSS样式优先级

引入样式的优先级

内联定义

CSS样式优先级效果图

嵌入内部css

CSS样式优先级
效果图

链接外部CSS

css外链接是把CSS文件放在网页外面，通过链接使CSS文件对本网页的样式有效
CSS样式优先级
CSS

效果图

链接外部CSS：作用在引用该CSS文件的网页中。
链接内部CSS：只作用在该CSS文件的网页中。
内联定义：只作用在定义该样式的div层中，对其它层无效。

样式优先级

继承

首先说一下继承的特点

<div>
	<p></p>
<div>

div的属性会被p继承，但是和面向对象中的继承一样，p中可以有自己的属性，但是div中不会有
优先规则1：最近祖先的优先级高于其他祖先

<div style="color: red">
        <div style="color: blue">
              <div class="son">
                  你猜这个字是什么颜色
              </div>
        </div>
 </div>

效果图：
CSS样式优先级
优先规则2：直接样式比祖先样式的优先级高

<div style="color: red">
      <div class="son" style="color: blue">
            你猜这个字是什么颜色
      </div>
 </div>

效果图：
CSS样式优先级

结尾：皮一下的我，请听下回分解css的七个基础样式