如何理解CSS层叠样式

　　CSS层叠性

　　CSS层叠性就是浏览器处理冲突的一个特性，如果一个属性中设置了多个选择器，那么这个时候只会有一个选择器起到作用，其他的选择器都将会被层叠的部分去掉。

　　层叠性的条件

　　（1）元素相同

　　（2）属性相同

　　（3）优先级相同

　　层叠性的样式冲突

　　（1）引用方式冲突

　　CSS的引用方式包括内联样式、内嵌样式、导入样式、链接样式，四个的优先级顺序分别是内联样式>内嵌样式>导入样式>链接样式

　　例：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<linkrel="stylesheet"type="text/css"src="style.css">

　　<style>

　　body{

　　background-color:pink;

　　}

　　</style>

　　<body>

　　<h1style="background-color:red">优先级</h1>

　　</body>

　　</html>

　　效果图如下：

　　（2）继承方式冲突

　　在CSS中有一些属性当给自己设置时会连带着自己的后代都继承上该属性值，例如CSS中设置颜色，字体大小，字体形状，对齐等等这些属性就会继承。但是有关于盒子，定位，布局等属性就不会发生继承

　　继承方式冲突就是显示跟自己最近的父元素而不是所有的父元素

　　例：

　　<styletype="text/css">

　　body{

　　color:pink;

　　}

　　#father{

　　color:red;

　　}

　　#grandfather{

　　color:blue;

　　}

　　</style>

　　</head>

　　<body>

　　<divid="grandfather">

　　<divid="father">

　　<div>

　　</div>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56194.shtml