4--css复合选择器及特性.ppt

三、CSS的优先级CSS的优先级是当层叠引发样式冲突的时候，浏览器根据优先级来决定元素应用哪个样式，优先级则由选择器的匹配规则即优先顺序来决定。4.5CSS的特性

三、CSS的优先级（1）引用样式表的优先顺序根据引用CSS样式的方式不同，优先级的顺序是： 内联样式内部样式外部样式如果外部样式放在内部样式的后面，如下图所示，外部样式优先级会反过来高于内部样式表。（就近原则）4.5CSS的特性

案例demo4-9.html三、CSS的优先级（2）继承性的优先级当HTML结构嵌套较深时，一个元素的样式可能会受它多层祖先元素的样式影响，这时它们的优先顺序是： 元素的自定义样式最近祖先高于其他祖先4.5CSS的特性

三、CSS的优先级（2）继承性的优先级h1class=test1hellospanworld/span/h1由span自定义的样式优先级高于从类“test1”中继承来的样式，所以最后文本的颜色渲染为红色。4.5CSS的特性

三、CSS的优先级（3）选择器的优先级选择器的优先级是通过计算每个选择器的权重值得出的，权重值大的优先级高，一般选择器的权重值如表所示： 4.5CSS的特性

继承样式标签选择器类选择器ID选择器内联样式表!important规则0110100100010000+三、CSS的优先级（3）选择器的优先级h1class=test1hellospanworld/span/h1styleh1{color:blue;}.test1{color:gray;}span{color:yellow;}h1span{color:green;}.test1span{color:red;}/style 4.5CSS的特性

思考一下：“world”最后什么颜色？案例demo4-10.html三、CSS的优先级（3）选择器的优先级 4.5CSS的特性

选择器权重值说明h10对于“world”，h1是继承样式，权重为0.test10对于“world”，类“test1”是继承样式，权重为0span1标签选择器，权重值为1h1span1+1组合选择器，计算标签选择器+标签选择器权重之和.test1span10+1组合选择器，计算类选择器+标签选择器权重之和根据计算选择器“.test1span”的权重值为11最大，因此它的优先级最高，最后文本“world”的字体颜色表现为“red”。三、CSS的优先级!important命令，无条件优先；文本“world”的最终颜色会显示为“green”，因为“!important”规则使得“h1span”的权重值变为10000+超越了“.test1span”的权重值。h1{color:blue!important;}对于文本“world”而言，标签h1的样式是继承样式权重值依然为0。h1span{color:green!important;}4.5CSS的特性

三、CSS的优先级（4）其他选择器的优先级除了一般选择器，其他选择器参考以下规则：属性选择器=伪类选择器=类选择器伪元素选择器=标签选择器 4.5CSS的特性

三、CSS的优先级（4）其他选择器的优先级除了这些CSS优先级规则，我们还要注意以下几个问题：当权重值相等时，后出现的样式表设置要优于先出现的样式表设置，即遵循“就近原则”；每个选择器分配的权重值的作用仅仅是用来比较大小，权重值的具体数据是没有任何意义的。创作者的规则优于浏览者，即网页编写者设置的CSS样式优于浏览器所设置的样式 4.5CSS的特性

小结1CSS组合选择器4CSS的特性继承性、层叠性、优先级后代、子代、普通兄弟、相邻兄弟2伪类选择器状态伪类、结构性伪类3属性选择器属性、属性值、部分属性值***满足相邻兄弟的条件：1）具有相同父元素；2）两个元素直接相邻；*思考一下：本案例中如果有样式规则：p+p{color:blue;}，会有哪几句古诗显示为蓝色呢？*浏览器对超级链接的伪类状态有默认的样式解析，例如：link状态下，超级链接的文本表现为“蓝色字体且具有下画线”