层叠的过程

比较优先级:

  若属性值后跟上!imprtangt表是一条重要声明,否则是普通声明

  优先级从低到高:

  1.浏览器默认样式表中的声明

  2.用户样式表中的普通声明

  3.作者样式表中的普通声明

  4.作者样式表中的重要声明

  5.用户样式表中的重要声明

比较特殊性:(优先级相同的情况)

  行内样式>ID选择器>类选择器>元素选择器>通配符选择器

  计较特殊性-具体规则

  在比较特殊性时,每一个冲突的声明会生成4个数字分组(a,b,c,d)

  a越大,特殊性越高,若a相同,比较b,b越大,特殊性越大,依次类推

  a:声明是行内样式

    b:ID选择器个数

    c:类选择器、伪类选择器、属性选择器个数

    d:元素选择器、伪元素选择器个数

  选择器                                a       b         c         d

  style                                   1       0        0         0

  id                                        0       1        0         0

  class、属性、伪类             0       0        1         0

  元素,伪元素                     0       0        0         1

当计算选择器分组时要分开计算

比较源次序:(优先级和特殊性相同的情况下)

若优先级和特殊性相同的情况下,最后出现的声明胜出,其他淘汰

时间: 2024-11-12 14:38:37

层叠的过程的相关文章

层叠的过程与盒子的组成

一.层叠 1. 什么是层叠? 层叠是一种机制,用于解决CSS声明冲突.即**当出现声明冲突时,浏览器自动触发层叠机制**. 层叠的过程(3步走,通过后只剩1条样式): ①比较优先级:一个声明的优先级,与它的**来源**和**重要性**有关. 按来源分为:作者样式表.浏览器默认样式表.用户样式表. 若属性值后面跟上 !important ,则表示一条重要声明,否则表示普通声明. 例如:color:red; 普通声明 color: red!important; 重要声明 ②比较特殊性:  一个声明的

css知多少(3)——样式来源与层叠规则

上一节<css知多少(2)--学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1. "层叠"的概念 CSS--层叠样式表,其中的"层叠"是什么意思呢?层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程.举一个简单的例子: 上图中有两个样式来源,第一个是引用的css1.css,第二个是自己在style中编写的样式."层叠"是

CSS层叠概述

什么是层叠: 层叠是一种机制,用于解决CSS声明冲突(多个相同的CSS声明属性,应用到一个元素上) 层叠的过程 层叠机制 比较优先级 比较特殊性 比较优先级 每一个声明都有一个优先级: 当发生冲突时,优先级高的会保留,优先级低的会被淘汰: 一个声明的优先级,与它的来源和重要性有关 解释来源 作者样式表 浏览器默认样式表 用户样式表 解释重要性 若属性值后面跟 !important,则表示一条重要声明:否则,表示普通声明. 示例: color:red;普通声明 color:red  !import

css——层叠

1.层叠是一种机制,用于解决css声明间的冲突. css冲突:多个相同的成熟时声明,用于同一个元素就会产生冲突. 2.层叠的过程 [1]比较优先级 每个声明否具有一个优先级,当声明发生冲突时,会保留优先级高的,淘汰优先级低的. 一个声明的优先级与他的来源和重要性有关.来源一般分为三部分:浏览器默认样式,作者样式,用户样式 从优先级高到低的排列顺序为:用户样式,作者样式,浏览器默认样式.重要性:如果某属性值后跟上一个"!importent",则表示一条重要声明,否则都是普通声明.列: p

CSS层叠和继承

层叠 当有声明冲突的时候,浏览器会自动触发层叠机制 声明冲突:同一样式,不同的值,给同一个标签就会产生声明冲突 层叠的过程 1.比较优先级 一个声明的优先级,与它的来源和重要性有关 来源:1.作者(开发者)样式表:外部样式表:内部样式表:行内样式表 2.浏览器默认样式表 3.用户样式表 优先级排序:用户样式表>作者样式表>浏览器样式表 重要性:若属性值后跟上!important,则表示一条重要声明,否则,表示普通声明 例:color:red:普通声明 color:red !important:

层叠机制

在css里,同一个样式的不同属性值应用于同一个标签则会产生声明冲突. 例如: 一旦出现声明冲突,浏览器会自动生成层叠机制. 层叠的过程 1.比较优先级 声明的优先级主要是看来源及重要性 来源:作者样式表.浏览器默认的样式表.用户样式表 按优先级从高到低:用户样式表>作者样式表>浏览器样式表 重要性:判断声明块里是否有!important,如果有,则表示是重要声明,将应用这个样式,反之为普通声明 当优先级为同级的时候则进入比较特殊性 2.比较特殊性 优先级:行内选择器>ID选择器>类

css层叠 权重

权重决定了哪一条规则会被浏览器应用在元素上 层叠的过程比较优先级:优先级低,淘汰,优先级高,胜出,相同则比较特殊性比较特殊性:特殊性低,淘汰,特殊性高,胜出,并列则比较源次序比较源次序:源次序靠前,淘汰,源次序靠后,胜出若属性值后跟上!important,则表示是一条重要声明 这里将选择器分为了a b c d四类  若选择器中有style 则a类加1 否则为0 如:两个不同的选择器都选中了同一个p标签     #main .content p{ color:green: } 这里#main是id

选择器和层叠

常见CSS属性: 属性color,示例 color:red,描述 设置元素内容的颜色 属性 text-align,示例 text-align:center,描述 设置元素内容的对齐 text-align,方式 text-align:center, 描述设置元素内容的对齐方式 属性 font-size, 示例 font-size:28px, 描述 设置元素内容的文字大小 属性 font-weight, 示例font-weight:bold, 描述 设置元素内容的文字粗细 属性 background

html/css层叠

一.定义:层叠是一种机制,用于解决CSS声明冲突,层叠的整个过程,是浏览器根据规则自动完成的. 二.层叠的过程: 1.比较优先级: 一个声明的优先级,与它的来源和重要性有关 来源:作者样式表.浏览器默认样式表.用户样式表 重要性:属性值后加!important表示重要声明 浏览器默认样式表中的声明 用户样式表中的普通声明 作者样式表中的普通声明 作者样式表中的重要声明 用户样式表中的重要声明 (优先级由低到高排列) 2.比较特殊性: 每一个声明都有一个特殊性 当发生冲突时,特殊性高的会保留,特殊