css样式应用优先级.ppt

《css样式应用优先级.ppt》由会员分享，可在线阅读，更多相关《css样式应用优先级.ppt（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、CSS样式应用优先级1位重要标志位 4位特殊性标志 声明先后顺序CSS样式应用优先级关系重要声明（!important）divcolor:blue!important;color:green;虽然按照顺序应该是使用后声明的绿色，但 是因为!important的缘故，所以最后使用的却是蓝色。正常声明1.内联样式在html文档的元素中直接插入样式的如：在ie6中此优先级与id选择器同级 2.id选择器应用于对应id的元素，css中用“#”后跟id来标记。如：#header display:none;3.类（属性，伪类）选择器 a)a)类选择器类选择器 应用于对应class的元素，css中用“.”后

2、跟class名来标记。如：headerdisplay:none;b）属性选择器属性选择器应用于对应class的元素，css中用“”标记中html元素属性名来标记。如：divtitle display:none;c)伪类选择器LVHA伪类,样式按LVHA优先级顺序从右至左覆盖。所以要注意一下这4个伪类的声明顺序，不同的顺序会产生不同的效果。a:link-默认链接样式a:visited-已访问链接样式a:hover-鼠标悬停样式a:active-鼠标点击样式4.元素（伪元素）选择器a)元素选择器应用于所有对应的html标签，css中直接使用html元素标记 如：divdisplay:none;b)

3、伪元素选择器:first-letter-首字母样式:first-line-首行样式5.通配符选择器 应用于所有匹配的样式，类似模糊匹配，*号就是什么都可以啦。如：div*display:none;6.继承样式和结合符 a)a)继承样式继承样式 p会继承div设置的样式，但没有权重，任何方式给p定义的样式都可以轻易覆盖继承样式 如：divcolor:red;b)结合符（combinator）1.后代选择器（descendant selector/上下文选择器contextual selector）后代结合符（descendant combinator）：空格空格前后的元素是后代关系。树结构的分支

4、选择器。（可一直嵌套下去，如：div p span）如：div span display:none;2.子（元素）选择器（child selector）子结合符：大于号（child combinator）大于前后的元素必须是父子关系。如：div span display:none;3.相邻兄弟选择器（adjacentsibling selector）相邻兄弟结合符（adjacentsibling combinator）：加号加号前后的元素必须是同级兄弟关系。如：li+li display:none;v事实上一般不会遇到太过复杂的情况，按照我们常用的简单地来记就是：v!important内联定义idclass元素复合结构（无定义复合父子复合兄弟复合）