《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 12.CSS三大特性

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1CSS层叠性02CSS继承性03CSS优先性目录contents思考：代码执行结果div

{color:red;

}div

{

color:green;

}div字体是什么颜色？<div>我是什么颜色</div>思考：代码执行结果.red{color:red;

}div

{

color:green;

}div字体是什么颜色？<divclass=”red”>我是什么颜色</div>思考：代码执行结果divp{color:green;

}.red{

color:red;

}div字体是什么颜色？<divclass=”red”><p>

我是什么颜色</p></div>PART1CSS层叠性CSS层叠性所谓层叠性是指多种CSS样式的叠加，是浏览器处理冲突的一种能力。一般情况下，如果出现样式冲突，则会按照CSS书写顺序，以最后的样式为准1.样式冲突，遵循原则是就近原则。执行样式离结构近的样式2.样式不冲突，不会层叠PART2CSS继承性继承性是指书写CSS样式表时，子标签会继承父标签的某些样式子元素可以继承父元素的文字样式有：CSS继承性以text-，font-，line-开头，及color属性的都可以继承注意：a

标签不具备继承性PART3CSS优先性定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。权重大的优先，权重规则如下：CSS优先级等级代表权值第一等级内联样式，如style=""1，0，0，0第二等级ID选择器，如#id=""0，1，0，0第三等级class|伪类|属性选择器，如.class|：hover|[type]0，0，1，0第四等级标签

|伪元素选择器，如p|：：after，：：before0，0，0，1通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器不在4个等级之内它们的权值都为0，0，0，0权重的计算选择器权重计算分析divulli0，0，0，33个标签·navulli0，0，1，21个类+2个标签a:hover0，0，1，11个伪类+1个标签·nava0，0，1，11个类+1个标签·clearfix::after0，0，1，11个类+1个伪元素#navp0，1，0，11个ID选择器和1个标签注意：数位之间没有进制，比如：0，0，0，10不能记作

0，0，1，0所以不存在10个div能超过一个类选择器的情况CSS优先级规则继承样式的权重为0行内样式优先权重相同时，CSS遵循就近原则CSS定义了一个!important命令，该命令被赋予最大的优先级在考虑权重时，初学者还需要注意一些特殊情况，具体如下：使用了!important声明的规则；内嵌在HTML元素的style属性里面的声明（行内式）；ID选择器的规则（#id）；类选择器、属性选择器和伪类选择器；元素选择器、伪元素选择器；继承的权重是0；权重相等时则遵循层叠性。CSS优先级排序问题1：CSS三大特性是哪些？问题2：CSS层叠性是什么？问题3：继承样式的权重是多少？问题4：权值为1