以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:

/*权重为1*/
        div{
        }
        /*权重为10*/
        .class1{
        }
        /*权重为100*/
        #id1{
        }
        /*权重为100+1=101*/
        #id1 div{
        }
        /*权重为10+1=11*/
        .class1 div{
        }
        /*权重为10+10+1=21*/
        .class1 .class2 div{
        }

如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现

css定义的权重的更多相关文章

  1. CSS选择器的权重与优先规则?

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

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

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

  3. css定义变量_css原生变量的使用和兼容 附带还有更高性能,文件更高压缩率的好处

    在开发中,css样式有一些属性往往需要重复使用,为了避免代码冗余,降低维护成本.我们需要使用CSS预编译工具[Sass/Less/Stylus],随着这些工具的流行,CSS变量也开始规范制定,目前很多 ...

  4. css优先级和权重

    1. 权重概念: 权重,是一个相对的概念,是针对某一指标而言.某一指标的权重是指该指标在整体评价中的相对重要程度. 权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下, ...

  5. 浏览器+css基础+选择器+权重+匹配规则

    浏览器的组成: shell+内核 shell:用户能看得到的界面就叫shell 内核:渲染rendering引擎和js引擎 现在主流拥有自己开发内核的浏览器:opera现在属于360和昆仑万维 CSS ...

  6. 用Less CSS定义常用的CSS3效果函数

    定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...

  7. CSS定义字体间距 字体行与行间距

    CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性     属性含义     属性值 Word-s ...

  8. css选择符权重

    css选择符权重 目录 css选择符权重 css选择器权重列表 CSS选择符冲突处理 css选择符权重 css选择器权重列表 选择器 权重 内联样式 1000 ID 0100 CLASS 0010 属 ...

  9. 【Learn】CSS定义

    CSS基础语法 本文用于介绍CSS相关的知识,用于记录自己的学习笔记.由于我已经熟悉了部分的HTML,所以相关的概念也不在这里进行描述了,直接写自己的一些心得感悟. 1.CSS规则 CSS是由两个主要 ...

随机推荐

  1. dup和dup2函数

    下面两个函数都可用来复制一个现存的文件描述符: #include<unistd.h> int dup(int filedes); int dup2(int filedes,int file ...

  2. C#多线程学习(一) 多线程的相关概念

    什么是进程?当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源.而一个进程又是由多个线程所组成的. 什么是线程?线程是程序中的一个执行流,每个线程都有自己的专有寄 ...

  3. Ruby on Rails Tutorial 第四章 Rails背后的Ruby 之 字符串

    1.辅助方法 2.字符串 输入“irb”进入Ruby命令行开发环境,控制器的启动方法是在命令行中执行“rails console”. (1)字符串连接 >>"foo"+ ...

  4. iOS开发基础知识:Core Animation(核心动画)

    Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core A ...

  5. cocos2d-x lua 实现单例(管理类)

    cocos2d-x lua 实现单例(管理类) version: cocos2d-x 3.6 示例代码 local DogManager = class("DogManager") ...

  6. Debian 7 安装 Python3.4

    Debian 7 自带的python是2.7.3,要用最新的3.4版本怎么办?我们从官网下载压缩包自己编译. 一.安装编译用的包 $ sudo apt-get install build-essent ...

  7. Android之ListView常用技巧

    ListView是一个非常常用的列表控件,虽然在5.x时代ListView的风头正在逐渐的被RecyclerView抢去,但是ListView的使用范围依然十分广泛. 接下来的ListView的常用技 ...

  8. 关于php一些数组函数

    array_column($array,"key") 将二维数组中的键名为key的数据生成一个新数组 array_unique($array) 去除重复值

  9. #if...#endif的用法总结

    在写到  pwm音阶程序的时候,在代码中有#if...#endif的用法问题,相关音阶的代码如下: /************************************************* ...

  10. 解决c#,wpf程序带环境安装包体积太大问题

    在.net开发客户端的时候,一定会遇到用户没有安装.net环境的问题,特别是现在win7,win8,win10多系统并用的时间段,很多开发者使用的是4.5的目标环境,用户却是使用win7的系统,这样势 ...