• css权重简单之谈


    原来回复51js上面一个兄弟的问题,害怕在茫茫的信息之海中会被淹没,暂时转到这儿来,以示学习总结之意。

    在回答别人问题时,对自己真是一个考验提高,在总结,摸清原有模糊概念的基础上要讲,全,简,易。真是不容易。佩服那些写教程福利芸芸众生的先行者们~!!


    下面简单谈谈css的权重:
    权重简单的也可以理解为JavaScript中的作用域,回头仔细想想,其实所有的IT抽象世界的东东都是通的。
    内嵌样式 > 内部样式表 > 外联样式表
    如:
    <head>
    <link href="main.css" rel="stylesheet" type="text/css" />
    <style>
    .txt
    {color:blue;}
    </style>
    </head>
    <class="txt" style="color:red">这是一个测试文本</p>
    main.css中:
    .txt{color:green}
    这三个里边:

    内嵌样式:

    style="color:red" 
    内部样式表:
    <style>
    .txt
    {color:blue;}
    </style>

    外联样式表:

    main.css
    中内容。
    这是大体上的css权重量级别,一般常用外联。
    然后我们在看常用的main.css中权重级别:
    在main.css 中:
    id选择器的权重是大于类选择器的权重。
    如:
    #test{color:red;}
    .test
    {color:blue;}
    其中#test的大于.test的权重。
    另外如果在一个css文件中出现两个同命的css属性值,那会怎么样呢?当然跟其它面向对象程序语言中的,覆盖相似,下面的属性会覆盖掉上面的属性。如:
    .test2{color:red;border:1px solid #ccc;}
    .test2
    {color:blue;font-size:14px;}
    这样最终应用到DOM元素上的样式是:
    color:blue;font-size:14px;border:1px solid #ccc;


    还有一种情况是层次选择器下面权重的延伸,这种情况是用js操作动态效果时可以节省不少js代码,在逻辑上面来说,展现与行为的分离也是尽善尽美。
    .txt{color:blue;}
    #wrap .txt
    {color:red;font-size:14px;}
    如:

  • 相关阅读:
    js判断选择时间不能小于当前时间的代码
    shell脚本编程之for语句、if语句使用介绍
    linux命令 chattr超级权限控件
    教你配置linux服务器登陆欢迎信息
    PHP基础入门教程 PHP循环函数
    php获取客户端ip地址
    PHP获取域名、IP地址的方法
    两日期间的间隔
    mysql 案例 ~ pt-archiver 归档工具的使用
    mysql 案例 ~ pt修复工具的使用
  • 原文地址:https://www.cnblogs.com/jikey/p/1894104.html
Copyright © 2020-2023  润新知