zoukankan      html  css  js  c++  java
  • 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;}
    如:

  • 相关阅读:
    struts2乱码
    修改maven的war包生成路径
    cookie的坑
    linux jps 命令
    (转)如何使VMware ip与本机ip处于同一网段
    springboot + swagger2 学习笔记
    can not find java.util.map java.lang.Double问题
    为什么不写 @RequestParam 也能拿到参数?
    乱码问题
    PostMan的使用注意事项
  • 原文地址:https://www.cnblogs.com/jikey/p/1894104.html
Copyright © 2011-2022 走看看