1.多个选择器可能会选择同一个元素,有3个规则,从上到下重要性降低: 
!important的用户样式
!important的作者样式
作者样式
用户样式
浏览器定义的样式 2.
CSS规范为不同类型的选择器定义了特殊性权重,特殊性权重越高,样式会被优先应用。
权重设定如下:
html选择器,权重为1;
类选择器,权重为10;
id选择器,权重为100;
这里还有一种情况:在html标签中直接使用style属性,这里的style属性的权重为1000;
即如下情况:
#x34y {color:red}
<. p id=x34y style="color:green"> 优先选择style=""设定的样式。 例子:
h1{color:blue} 权重为1
p em{color:yellow} 权重为2
.warning{color:red} 权重为10
p.note em.dark{color:grag} 权重为22
#main{color:black} 权重为100 这里还有一种情况:
权重一样时如何处理? 3.CSS样式的层叠原则——谁离我近,谁说了算。
当权重一样时,会采用“层叠原则” 后定义的会被应用。
如:p{color:yellow}
p{color:red}
作用到这里 <. p >我的什么颜色呢?< /p>
结果会是red的。 4.CSS样式的特殊标记——谁有特权,谁说了算。
如果有人看不顺眼,非得要自己说了算,那可以搞点特权,如下即可
p {color:blue !important;}
加上!important;可将自己权重设为最高。 摘抄于:https://zhidao.baidu.com/question/371989189.html

转-CSS优先级(权重)解析的更多相关文章

  1. 关于CSS的优先级,CSS优先级计算

    原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...

  2. 关于CSS的优先级,CSS优先级计算,多个class引用

    原则一: 继承不如指定 原则二: #id > .class > 标签选择符 原则三:越具体越强大 原则四:标签#id >#id ; 标签.class > .class CSS优 ...

  3. Css权重解析

    Css权重解析 关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下: spec ...

  4. css选择器优先级全解析

    这样一个问题: <!doctype html> <htmllang="en"> <head> <metacharset="UTF ...

  5. CSS那些事儿-阅读随笔2(选择符的组合与优先级/权重)

    在知道了CSS选择符最基础的知识后,就要综合利用它们了.这里就记录几种常见的用法. 1.针对性的使用类选择符或者ID选择符 类选择符在一个页面中可能会在不同的地方应用,那么就需要有针对性地使用类选择符 ...

  6. CSS优先级的及其衡量标准CSS权重

    一.背景 CSS有三大特性:层叠性.继承性.优先级. 而我们在给CSS定义样式的时候,经常出现两个及以上的规则应用在同一元素上,单该元素最终在浏览器呈现的效果是应用的哪个规则呢?这就要考虑优先级的问题 ...

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

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

  8. css的层叠性+继承性+优先级+权重

    一.层叠性 1.含义 多种css样式叠加,浏览器处理冲突的能力. 2.原则 1>一般情况下,若出现冲突,会按照css的书写顺序,以最后的样式为准 2>样式不冲突,就不会层叠 二.css的继 ...

  9. css优先级和权重

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

  10. css样式权重优先级,css样式优先级

    原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...

随机推荐

  1. buildroot 重新编译 package

    /************************************************************************* * buildroot 重新编译 package ...

  2. Linux 下安裝 Java SE Development Kit(JDK)並配置環境變量

    下載頁面:http://www.oracle.com/technetwork/java/javase/archive-139210.html 打開“Java SE 7”,再打開“Java SE Dev ...

  3. java 执行redis的部分方法

    @Autowired private RedisTemplate<String, Object> redisTemplate; public void setRedisTemplate(R ...

  4. Python网络编程学习_Day9

    一.socketserver实现多并发 socket只能实现单进程通讯,要实现多进程同时和服务端通讯就要使用socketserver. 代码如下: import socket client = soc ...

  5. CODE[VS]-最小数和最大数-整数处理-天梯青铜

    题目描述 Description 输入n个数,n<=100,找到其中最小的数和最大的数 输入描述 Input Description 第一行一个整数n 接下来一行n个整数,每个整数不超过231 ...

  6. Scala 中Null, None, Nothing, Nil

    转自:http://blog.csdn.net/bluejoe2000/article/details/30465175 在scala中这四个类型名称很类似,作用确实完全不同的. None是一个obj ...

  7. 解析Properties文件

    /** * 传入需要解析的文件属性,传入文件的路径 * @param para 需要获取的属性名称.也就是键值对中的键名称 * @param filepath * @return */ public ...

  8. IntelliJ IDEA “Finds duplicated code”提示如何关闭

    发现重复的代码这个提示真的很烦啊,我们怎么关闭他呢. 设置在这里: Settings -> Editor -> Inspections -> General -> Duplic ...

  9. C#里面Auotpostback回刷时候,textbox里面的password怎么保存

    刷新页面时,如何保留页面上的PassWord模式下的TextBox的值? this.txtUserPwd.Attributes["value"] = txtUserPwd.Text ...

  10. Java 序列化 序列化与单例模式 [ 转载 ]

    Java 序列化 序列化与单例模式 [ 转载 ] @author Hollis 本文将通过实例+阅读Java源码的方式介绍序列化是如何破坏单例模式的,以及如何避免序列化对单例的破坏. 单例模式,是设计 ...