文档介绍：上节复选择器
伪类选择器
类选择器
id选择器
本节内容
CSS的层叠性
CSS的继承性
选择器的组合
CSS属性和值的介绍
CSS滤镜效果
CSS的层叠性
CSS的层叠性
CSS具有两个特性:层叠性和继承性。
层叠性是指当有多个选择器都作用于同一元素时,即多个选择器的作用范围发生了重叠,CSS怎样处理?CSS的处理原则是:
1)如果多个选择器定义的规则不发生冲突,则元素将应用所有选择器定义的样式。如:
CSS的层叠性-未冲突
<style type="text/css">
p{ /* 标记选择器*/
color:blue;
font-size:18px;}
.special{ /* 类别选择器*/
font-weight: bold; } /* 粗体*/
#underline{
text-decoration: underline; } /* 有下划线*/
</style>
<p>标记选择器1</p><p>标记选择器2</p>
<p class="special">受到标记、类两种选择器作用</p>
<p id="underline" class="special">受到标记、类和id三种选择器作用</p>
CSS的层叠性-发生冲突
2)如果多个选择器定义的规则发生了冲突,则CSS按选择器的优先级让元素应用优先级高的选择器定义的样式。CSS规定选择器的优先级从高到低为:
行内样式> ID样式> 类别样式> 标记样式。总的原则是:越特殊的样式,优先级越高。如:
选择器的优先级
<style type="text/css">
p{ /* 标记选择器*/
color:blue;
font-style: italic; }
.green{ /* 类选择器*/
color:green; }
.purple{
color:purple; }
#red{ /* ID选择器*/
color:red;}
</style>
<body>
<p>这是第1行文本</p>
<p class="green">这是第2行文本</p>
<p class="green" id="red">这是第3行文本</p>
<p id="red" style="color:orange;">这是第4行文本</p>
<p class="purple green">这是第5行文本</p>
</body> li
!important的用途
可以通过!important强制改变选择器的优先级,则优先级为!important >行内样式> ID样式> 类别样式> 标记样式
另外,如果在同一个选择器中定义了两条相冲突的规则,则以后一条为准。如果为某一条添加了!important,那么IE6总是以后一条为准,不认!important 。而Firefox/IE7以定义了!important的为准
#box {
color:red!important; /*Firefox执行这一条*/
color:blue; /*IE6执行这一条*/}
CSS的继承性
CSS的继承性
CSS的继承性是指如果子元素定义的样式没有和父元素定义的样式发生冲突,那么子元素将继承父元素的样式风格,并可以在父元素样式的基础上再加以修改,自己定义新的样式,而子元素的样式风格不会影响父元素。如: