/*权重 :id > class > 标签  (小环境)

        权重:内联 > 内部 > 外部  (大环境)

         小环境处于内部环境中

    */

    <style>              

        #p1{    /* id类选择器 */

            css样式

        }        

        .class{        /* class类选择器 */  

            css样式

        }

        p #p3,#p1 {     /* 混合选择    p3不生效 */

            css样式

        }

        p#p3,#p1 {     /* 更为精确的混合选择    权重除内联之外最大        p1,p3都生效 */

            css样式

        }

        p {        /* 标签选择    权重小于混合选择 */

            css样式

        }

        .class1:before {  /* 调用伪元素选择器的结构类方法 */

            content: "";

        }

        </style>

还有一种情况就是使用!important,在这种情况下就会有所不同。

.test{
color:#fff !important;
}

!important的css定义是拥有最高的优先级的,优先于以上的内联、内部、外部

【CSS】简略说明css的权重之分的更多相关文章

  1. CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  2. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

  3. 从webkit内核简单看css样式和css规则优先级(权重)

    目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...

  4. CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源

    CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...

  5. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

  6. css模块化及CSS Modules使用详解

    什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...

  7. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

  8. CSS从零开始(1)--CSS基础语法

    1.CSS语法 CSS规则有两个主要部分构成:选择器,以及一条或多条说明. 例如:selector{declaration1;declaration2;declaration3;......;} 注: ...

  9. h5 . css入门 2.CSS基础

    CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...

随机推荐

  1. lecture-7 递归

    1.例题--排列 Permutation Given a collection of distinct numbers, return all possible permutations.For ex ...

  2. Hadoop实战:微博数据分析

    项目需求 自定义输入格式,将明星微博数据排序后按粉丝数 关注数 微博数 分别输出到不同文件中. 数据集 下面是部分数据,猛戳此链接下载完整数据集 数据格式: 明星   明星微博名称    粉丝数    ...

  3. [转]logX<X对所有的X>0成立

    本文引用地址:http://blog.sciencenet.cn/blog-1865911-831450.html 此文来自科学网何召卫博客,转载请注明出处. 这个命题网上有多种证法,有人甚至采用斜率 ...

  4. mysql 链接时报错:1251-Client does not support authentication protocol requested by server

    一 原因是mysql服务器要求的认证插件版本与客户端不一致造成的. 二 由于我是最新的mysql和破解版的navicat,那么就是mysql太高级了. 解决方法有两个,我毫不犹豫的选择mysql降级. ...

  5. kotlin查看编译后的Java代码

    java学一下kotlin,由于用的是同样的jvm,那就说明他们的字节码文件应该是一样的,那么,如果我们能看到编译后的文件,那么学的更快了. 操作 1.打开一个.kt文件 2.在Android Stu ...

  6. ElasticSearch服务器操作命令

    在win7环境,进入elasticsearch安装目录的bin目录: 1. elasticsearch.bat 就可以启动elasticsearch了.运行这个插件的好处是:elasticsearch ...

  7. WPF使用Aspose.Words导出Word文档

    一.创建Word文档模板 分析需要导出的word文档,将固定的内容和由程序生成的内容分开; 创建一个word(例如:Template.doc)文档,将固定的内容按照一定的格式写入当前文档中; 打开Te ...

  8. ssm(Spring、Springmvc、Mybatis)实战之淘淘商城-第十二天(非原创)

    文章大纲 一.课程介绍二.Ngnix基础知识学习三.Ngnix在淘淘商城中使用四.参考资料下载五.参考文章 一.课程介绍 一共14天课程(1)第一天:电商行业的背景.淘淘商城的介绍.搭建项目工程.Sv ...

  9. 谈谈我对MVC的View层实现的理解

    MVC框架可以把应用清晰明了地分为三个部分:Model层–数据层,View层–视图层,Controller–逻辑层,Model层负责整合数据,View层负责页面渲染,Controller层负责实现业务 ...

  10. 转载 tomcat6下项目移植到tomcat7下出问题的解决办法

    转载,原文地址  http://hw1287789687.iteye.com/blog/1817865 org.apache.catalina.core.ContainerBase addChildI ...