第一章入门篇选择符之间的关系

1.选择符的覆盖

CSS后面定义的样式会把前面定义的样式覆盖

    <style type ="text/css" >
    p{ color :Blue;}
    p{ color:Red;}
    /*最终p元素会文字会显示红色，把前面定义的蓝色覆盖了*/
    </style>

2.选择符的继承

子元素可以继承父元素中定义的样式，比如在body中定义了字体大小，其子元素p可以继承字体大小样式

    <style type ="text/css" >
    body
    {
        font-size:12px;
    }
    p{ color:Red;}
    /*p元素继承body元素中的字体大小，字体大小为12px*/
    </style>

但并不是所有元素都会继承父元素的样式，比如h1,h2,h3~h6这几个元素将会应用浏览器默认样式设置文字大小

3.选择符的权重和优先级

网页中的样式大致可以分为4种：HTML、作者、用户、浏览器。HTML是HTML页面中的样式，包括内部样式表（位于<head>内部）和内联样式（位于HTML元素上），作者就是CSS作者定义的样式即外部样式表，用户即用户在浏览器设置的样式，浏览器就是浏览器的默认样式。

所有样式中标有!important的样式权重最高，以上每种样式权重由高到底依次为：

1.标有！important的样式，如color：red !importan

2.内联样式>内部样式

3.外部样式表

4.用户设置的样式

5.浏览器的默认样式

在外部样式表中以选择符的组合方式决定选择符的权重，相同的组合方式根据定义的先后顺序决定

    <style type ="text/css" >
    #myColor { color:Green;  }
     p{ color:Blue;}
    .myColor { color:Yellow; }
    p.myColor { color:Black; }
    </style>

    <div class ="myColor">
        <p>蓝色</p>
        <p class ="myColor" >黑色</p>
        <p class ="myColor" id ="myColor" >绿色</p>
        <p class ="myColor"  style ="color:Maroon;" >棕色</p>
    </div>

可以用如下规则计算权重值：

1.标签选择符、伪类伪对象优先级为1

2.类选择符、属性选择符优先级为10

3.ID选择符优先级为100

4.style中的选择符优先级为1000

5.其他选择符优先级为0

根据以上规则把每个样式组合中的选择符优先级相加，得出每个样式的权重，如上的样式权重为

p=1

.myColor=10

p.myColor=1+10=11

#myColor=100

style ="color:Maroon;"=1000

第一章入门篇选择符之间的关系

猜你喜欢