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


    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

  • 相关阅读:
    slice,substr和substring的区别
    http请求方法
    Git常用命令
    IOS开发之NSLog使用技巧
    网络请求之get与post异步请求
    通知(广播)传值
    [转]->ios推送:本地通知UILocalNotification
    [转]iOS 不要使用tag传递TableViewCell的indexPath值
    UIWebView uiwebview 加载本地html
    [转]字符串编码转换
  • 原文地址:https://www.cnblogs.com/lidaying5/p/9911815.html
Copyright © 2020-2023  润新知