css样式应用优先级实用

会计学1css样式应用优先级实用①重要声明（!important）div{

color:blue!important;

color:green;}虽然按照顺序应该是使用后声明的绿色，但是因为!important的缘故，所以最后使用的却是蓝色。

第1页/共15页②正常声明1.内联样式

在html文档的元素中直接插入样式的

如：<divstyle=”display:none;”></div>

在ie6中此优先级与id选择器同级第2页/共15页2.id选择器

应用于对应id的元素，css中用“#”后跟id来标记。如：#header{display:none;}<divid=”header“></div>第3页/共15页3.类（属性，伪类）选择器

a)类选择器应用于对应class的元素，css中用“.”后跟class名来标记。

如：header{display:none;}<divclass=”header“></div>第4页/共15页b）属性选择器

属性选择器应用于对应class的元素，css中用“[]”标记中html元素属性名来标记。

如：div[title]{display:none;}<divtitle=”any”></div>第5页/共15页c)伪类选择器

LVHA伪类,样式按LVHA优先级顺序从右至左覆盖。所以要注意一下这4个伪类的声明顺序，不同的顺序会产生不同的效果。

a:link-默认链接样式

a:visited-已访问链接样式

a:hover-鼠标悬停样式

a:active-鼠标点击样式第6页/共15页4.元素（伪元素）选择器a)元素选择器

应用于所有对应的html标签，css中直接使用html元素标记

如：div{display:none;}<div></div><div></div>第7页/共15页b)伪元素选择器

:first-letter-首字母样式

:first-line-首行样式

第8页/共15页5.通配符选择器

应用于所有匹配的样式，类似模糊匹配，*号就是什么都可以啦。

如：div*{display:none;}<div><div></div><span></span></div>第9页/共15页6.继承样式和结合符

a)继承样式p会继承div设置的样式，但没有权重，任何方式给p定义的样式都可以轻易覆盖继承样式

如：div{color:red;}<div><p></p></div>第10页/共15页b)结合符（combinator）1.后代选择器（descendantselector/上下文选择器contextualselector）

后代结合符（descendantcombinator）：空格

空格前后的元素是后代关系。树结构的分支选择器。

（可一直嵌套下去，如：divpspan）

如：divspan{

display:none;}<div><p><span></span></p></div><span></span><div><em></em></div>第11页/共15页2.子（元素）选择器（childselector）

子结合符：大于号（childcombinator）

大于前后的元素必须是父子关系。

如：div>span{

display:none;}<div><span></span></div><div><em><span></span></em></div>第12页/共15页3.相邻兄弟选择器（adjacentsiblingselector）

相邻兄弟结合符（adjacentsiblingcombinator）：加号

加号前后的元素必须是同级兄弟关系。

如：li+li{display:none;}<ol><li></li><li></li><li></li></ol>第13页/共15页事实上一般不会遇