/*权重 :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. POJ 1410 Intersection 数据错误

    题目要求判断一条线段和一个矩形是否相交,或者是否在矩形里面(题目好像没说?) 思路就是直接暴力判断和矩形四条边是否相交,和线段的坐标是否在矩形的坐标范围即可. 然后题目的数据,(xleft,ytop) ...

  2. OpenStack Weekly Rank 2015.07.20

    Module Reviews Drafted Blueprints Completed Blueprints Filed Bugs Resolved Bugs Cinder 8 1 3 9 10 Sw ...

  3. Storm概念学习系列之storm简介

    不多说,直接上干货! storm简介 Storm 是 Twitter 开源的.分布式的.容错的实时计算系统,遵循 Eclipse Public License1.0. Storm 通过简单的 API ...

  4. SpringBoot | 第十四章:基于Docker的简单部署

    前言 讲解了单元测试,本章节讲讲应用的部署吧.总体而言,在进行自动化部署时,基本都会用上Jenkins+Maven+Docker进行部署.本章节主要讲解使用Maven+Docker进行SpringBo ...

  5. idea关闭sonar自动扫描

    file-setting-other setting-sonar相关的setting全部关闭

  6. ruby firefox23报错:waiting for evaluate.js load failed

    解决方法 gem install selenium-webdriver -v='2.34.0'

  7. vue-实现一个购物车结算页面

    这是路由之间的跳转,传递值最好采用传参,而不是用$emit和$on,不起作用 如果实在一个页面中的兄弟组件,可以使用$emit和$on 中间件,eventBus.js 放在components目录下面 ...

  8. 根据accept-language自动设置UICulture和Culture

    在web.config中添加如下配置: <system.web> <globalization uiCulture="auto" culture="au ...

  9. HDU 1028 Ignatius and the Princess III伊格和公主III(AC代码)母函数

    题意: 输入一个数n,求组合成此数字可以有多少种方法,每一方法是不记录排列顺序的.用来组成的数字可以有1.2.3....n.比如n个1组成了n,一个n也组成n.这就算两种.1=1,2=1+1=2,3= ...

  10. pat甲级1012

    1012 The Best Rank (25)(25 分) To evaluate the performance of our first year CS majored students, we ...