/*权重 :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. [切图仔救赎]炒冷饭--在线手撸vue2响应式原理

    --图片来源vue2.6正式版本(代号:超时空要塞)发布时,尤雨溪推送配图. 前言 其实这个冷饭我并不想炒,毕竟vue3马上都要出来.我还在这里炒冷饭,那明显就是搞事情. 起因: 作为切图仔搬砖汪,长 ...

  2. hibernate课程 初探单表映射1-11 通过hibernate API访问编写第一个小例子

    hibernate 业务流程 1 创建配置对象 Configuration config  = new  Configuration().configure(); 2 创建服务注册对象 Service ...

  3. Compaq Visual Fortran生成静态库的方法及使用

    Compaq Visual Fortran 6.5生成lib静态库详细方法: 打开Compaq Visual Fortran,新建Fortran Static Library工程,命名为ForLib: ...

  4. grafana快速入门

    入门 本指南将帮助您开始并熟悉Grafana.它假定您有一台正在运行的Grafana服务器,并至少添加了一个数据源. 初学者指南 观看10分钟的初学者指南,以建立仪表板,以快速介绍设置仪表板和面板. ...

  5. 中标麒麟高级服务器操作系统V6

    平台: linux 类型: 虚拟机镜像 软件包: java-1.6.0 mysql-5.1.5 python-2.6 qt3-3.3.8b basic software linux neokylin ...

  6. docker使用alpine系统构建tomcat镜像

    FROM frolvlad/alpine-oraclejdk8 #此镜像使用alpine-glibc系统,精简jdk,只运行java程序,无法编译/构建 MAINTAINER huqiang:2018 ...

  7. 转: ZigBee/Z-Stack CC2530实现低功耗运行的配置简介

    转: ZigBee/Z-Stack CC2530实现低功耗运行的配置简介http://bbs.elecfans.com/jishu_914377_1_1.html(出处: 中国电子技术论坛) 设备支持 ...

  8. C++,C++编程,Windows编程,MFC

    编程 我们日常生活中接触到的电子类产品中的应用都是由编程而来 为什么编程,偷懒 我们通过编程驱使(指挥,命令)的是电信号 为什么上面说编程是偷懒,电的发现,给人们带来了便利,人们在各个方面驱使(换成“ ...

  9. pat甲级1012

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

  10. linux 命令——45 free(转)

    free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer.在Linux系统监控的工具中,free命令是最经常使用的命令之一. 1.命令格式: free [参 ...