一.首先从CSS级别来进行优先级划分：

CSS控制页面样式的四种方法：

1.行内样式

通过style特性

<p style=”color:#F00; background:#CCC; font-size:12px;”></p>

2.内嵌方式

将CSS代码写在head和/head之间,并用style进行声明

<style type=”text/css”>
<!–
#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
–>
</style>

3.链接方式

<link href=”style.css” type=”text/css” rel=”stylesheet” />

4.导入方式

导入样式和链接样式比较相似，采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌方式。(这个目前没遇到过)

四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式

目前有个疑问：如果内嵌定义了p,链接定义了a,那么内嵌应该不会覆盖链接吧？

二.从CSS内部进行优先级划分

CSS通过一个叫做层叠（cascade）的过程处理这种冲突。层叠给每个规则分配一个重要程度指数。作者定义的样式具有最高的重要性指数，其次是用户定义的样式。但是为了增强用户的控制能力，用户可以通过为任何规则增加一个!important来提高它的重要性指数，让它的优先级高于任何规则，甚至是比作者的!important还要高。
因此，层叠重要性指数的次序依次为：

  1. 标记为!important的用户样式
  2. 标记为!important的作者样式
  3. 作者样式
  4. 用户样式
  5. 浏览器/用户代理的默认样式

默认样式的选择器的优先指数由选择符对应的数值相加而成，数值越高，优先级越高。

CSS中的选择符有四类：

  1. 行内样式（Inline Style），如<span style="color:red">...</span>
  2. ID选择符（ID selectors），如#myid
  3. 类、属性选择符、伪类（Classes, attributes and pseudo-classes），如 .class {...}、[href$=dudo.org]、:hover
  4. 元素（elements)、伪元素选择符(pseudo-elements)，如 p {...}、:first-line {...}
  5. 通配符选择器，即*，为0
  6. 继承来的，最低。

行内样式为：1000
ID选择符为：0100
类选择符为：0010
元素样式为：0001

例如，body #wrap p {...}，那么它的优先级指数就是 1 100 1=102，而body div#wrap p {...}的优先级指数就是 1 1 100 1 =103。

三.继承产生的冲突

血缘越近的优先级越高,父继承比爷爷继承优先级高.

浏览器的控制台是很好的参考工具,而且会详细帮你划掉冲突中被排除的规则.

比如如下：

2的颜色还是会是蓝色，因为继承的权重最低。

即使将span改为*，也还是蓝色，继承的权重比*还低。

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        span{color:blue;}

       body div.red{color: red;}

    </style>

</head>

<body>

<div class="parent">

    <div class="red">1</div>

    <div class="blue"><span>2</span></div>

</div>

　　

参考：

http://www.jb51.net/css/6773.html

http://www.cnblogs.com/liwon/p/3526369.html

css层叠性冲突中的优先级的更多相关文章

  1. 0017 CSS 三大特性：层叠性、继承性、优先级

    目标: 理解 能说出css样式冲突采取的原则 能说出那些常见的样式会有继承 应用 能写出CSS优先级的算法 能会计算常见选择器的叠加值 5.1 CSS层叠性 概念: 所谓层叠性是指多种CSS样式的叠加 ...

  2. CSS学习笔记03 CSS层叠性、继承性、特殊性

    层叠性 所谓层叠性是指多种CSS样式的叠加,也就是说后面设置的样式会层叠(覆盖)之前的样式,层叠性的前提是CSS的选择器的优先级相同,例如,当使用内嵌式CSS样式表定义<p>标记字号大小为 ...

  3. css层叠性和继承性

    1.了解css层叠性 层叠性是什么?就是解决处理css选择器和属性冲突的能力.css的选择器权重是分大小,就是当多个选择器都选中了同一个标签时,听谁的??? 标签选择器 < 类选择器 < ...

  4. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

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

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

  6. 认识CSS中css的三大特性：层叠性、继承性以及优先级

    前端之HTML.CSS(四) CSS CSS三大特性 层叠性:多种样式的叠加,一个属性通过两个选择器设置在同一个元素上,后一个样式会把前一个样式层叠(覆盖).层叠性的两种情况:第一种样式冲突时,后样式 ...

  7. 前端 CSS层叠性 CSS选择器优先级

    层叠性 层叠性:权重的标签覆盖掉了权重小的标签,说白了 ,就是被干掉了 权重:谁的权重大,浏览器就会显示谁的属性 我们现在已经学过了很多的选择器,也就是说在一个HTML页面中有很多种方式找到一个元素并 ...

  8. CSS——层叠性

    层叠性:浏览器渲染是从上而下的,当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码).和标签调用选择器的顺序没有关系. <!DOCTYPE htm ...

  9. CSS层叠性

    比较id,类,标签的数量 谁多就谁在上面 255个类的权重等于一个id 当权重一样时,以后设置的为准 通过继承而来的,权重为0 !important (设置权重无限大)可以影响权重,但只能影响选中的, ...

随机推荐

  1. PTA 7-3 jmu-ds-单链表的基本运算（15 分）

    jmu-ds-单链表的基本运算(15 分) 实现单链表的基本运算:初始化.插入.删除.求表的长度.判空.释放.(1)初始化单链表L,输出L->next的值:(2)依次采用尾插法插入元素:输入分两 ...

  2. 1、http协议基础及IO模型

    Nginx (web server,web reverse proxy): http协议:80/tcp,HyperText Transfer Procotol http协议版本: HTTP/0.9:原 ...

  3. vs里32位项目和64位项目的区别

    由于操作系统内存分配的不同,导致软件开发过程中,需要编译不同版本的软件. 1.编译程序根据需要选择不同的编译环境. x86和win32为32位程序,x64为64位程序,可以选择不同的编译条件形成不同位 ...

  4. Java三种代理模式：静态代理、动态代理和cglib代理

    一.代理模式介绍 代理模式是一种设计模式,提供了对目标对象额外的访问方式,即通过代理对象访问目标对象,这样可以在不修改原目标对象的前提下,提供额外的功能操作,扩展目标对象的功能. 简言之,代理模式就是 ...

  5. [转]jsbsim基础概念

    转自: 么的聊链接:https://www.jianshu.com/p/a0b4598f928a 虽然用户不需要掌握太多 JSBSim 飞行模拟器的细节,但是了解 JSBSim 的基本工作流程也会对学 ...

  6. [JS]给String对象添加方法,使传入的字符串字符之间以空格分开输出

    看到一个这样子的面试题: 给String对象添加一个方法,传入一个string类型的参数,然后将string的每一个字符间加空格返回,例如:addSpace("hello world&quo ...

  7. 力扣（LeetCode）202. 快乐数

    编写一个算法来判断一个数是不是"快乐数". 一个"快乐数"定义为:对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和,然后重复这个过程直到这个数变为 ...

  8. 力扣（LeetCode）69. x 的平方根

    实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. 示例 1: 输入: 4 输出: 2 示例 ...

  9. 基于虹软sdk，java实现人脸识别（demo）

    ## 开发环境准备:###开发使用到的软件和工具:* Jdk8.mysql5.7.libarcsoft_face.dll(so).libarcsoft_face_engine.dll(so).liba ...

  10. 滑动拼图 Sliding Puzzle

    2018-09-09 22:01:02 问题描述: 问题求解: 问题很Interesting,其实本质就是解空间遍历,使用BFS就可以很快的予以解决~ public int slidingPuzzle ...