CSS理解样式表层叠

在网页中,添加样式的方法有三种:嵌入式样式表,外部样式表和内联样式表。

优先级算法按照先后顺序考虑一下三个方面:

  1.css规则的重要性和来源;

  2.css规则的特殊性;

  3.css规则在文档中出现的顺序;

一、找到选择器匹配特定元素的所有声明;

二、根据样式声明的重要性和来源进行优先级排序

  重要性有两种:带“!important”定义的声明和不带“!important”定义的声明。在CSS规则后添加!important的重要性要高于没有添加的。
  来源有三种样式:浏览器默认、开发人员定义的样式、用户在浏览器中定义的样式。
    重要性和来源的优先级排序从低到高是:
      1.浏览器默认样式
      2.用户在浏览器中定义样式中的normal规则
      3.开发人员定义的样式中的normal规则
      4.开发人员定义的样式中的important规则
      5.用户在浏览器中定义的important规则

三、按照特殊性(Specificity)排序

  指定越详细的选择器将覆盖更一般的选择器。

  CSS将计算多个规则中指定每一个规则的选择器的特殊性值,值越高,优先级越高。

  特殊性值是一个由4个整数组成的一个类似数组的值:a,b,c,d,其中a的权重最高,依次类推,d的权重最低。

  计算方法:

  ①如果该规则是一条内联样式,那么a=1,否则a=0;

  ②如果该规则由选择器指定,选择器中出现的id选择器的数量就是b的值;

  ③如果该规则由选择器指定,选择器中出现的属性选择器(包括类选择器)或者伪类选择器的数量总和就是c的值;

  ④如果该规则由选择器指定,选择器中出现的元素选择器或者是伪元素选择器的数量总和就是d的值;

  ⑤通配符选择器*的特殊性值为0,0,0,0。

 由于a的权重最高,因此首先比较a,在a相同的情况,再比较b,依次类推。因此无论b,c,d值有多大,内联样式总是具有最高的特色性。

四、比较CSS规则在文档中出现的顺序

  如果两条规则有相同的重要性、来源和特殊性值,那么,出现在后面的总是比出现在前面的具有更高的优先级。

时间: 2024-11-05 11:46:33

CSS理解样式表层叠的相关文章

[2016-01-16][CSS][定义样式表(样式选择器)]

Class 定义:.classname{ 属性:属性值;} 使用:<p class = "classname"></p> ID 定义: #IDNUM{ 属性:属性值; } 使用:<p id = "IDNUM"></p> 组合选择器 定义:标记1,标记2...标记n{属性:属性值;} 使用:直接正常使用上面存在标记即可 伪选择器 calss的使用 ID的使用 组合选择器h1 h2 h3 伪选择器 1 2 3 4 5 6

CSS重置样式表

一.为什么需要重置样式表 即使不写CSS样式,HTML标签在浏览器中也有样式,这些样式来自浏览器本身.但问题是,不同浏览器默认样式可能不同.CSS重置样式表就是为了解决这个问题. 二.常用的重置样式表 (1)简单暴力型 只有一行: *{margin:0; padding:0;} 通配符"*"匹配了所有的标签,通常认为性能不好. (2)归零型 (几乎)全部将标签样式清零.如YUI(http://yuilibrary.com/)的重置样式表. (3)保留基础样式型 并不是将所有标签的默认样

css 层叠式样式表(2)

一,样式表分类 (1)内联样式. --优先级最高,代码重复使用最差. (当特殊的样式需要应用到单独某个元素时,可以使用. 直接在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2)内嵌样式表. --优先级别第二,不常用,代码重用性一般. (当单个文件需要特别样式时可以使用内嵌样式表.在 head 部分通过 <style> 标签定义内部样式表.) (3)外部样式表. --  优先级最低,最常用,代码重用性最高. (当样式需要被应用到很多页面的时候,可以使用.使用外部样式表可以

CSS的样式表基本概念

一.样式表分类 1.内联样式表 <p style="fint-size:24px;">直接在标签内部进行样式设置</style> 2.内嵌样式表 <head> <style type="text/css"> p    /*以p标签命名,一下所有p标签都会执行此样式*/ { 样式} </style> </head> 3.外部样式表(最常用的) 新建一个css文件,需要在html文件中调用css样式

学习HTML 第三节.接近正题:HTML样式-CSS级联样式表

CSS (Cascading Style Sheets)级联样式表 内联样式 内联样式- 在HTML元素中使用"style" 属性 使用内联样式的方法是在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.以下实例显示出如何改变段落的颜色和左外边距 <p style="color:blue;margin-left:20px;">This is a blue paragraph and with 2 blank in the left.</

css重构样式表性能调优

1重构和架构:重构:重构是在不改变代码行为的前提下,重写代码软件架构:优秀的架构可提升代码的复用性需要重构的原因什么情况下应该重构代码?我能重构自己的代码吗?重构的示例.2级联什么是?选择器特指是3编写更优质的css使用注释结构一致的规则表保持选择器的简单分离css和javascript使用类4 为样式分类 样式分类的重要性通用样式基础样式组件样式5 测试需要测试的重点的浏览器第三方测试工具维护你的代码6 代码的组织和重构策略按照样式从最小最不精确到最精确组织CSS重构 原文地址:http://

css 层叠式样式表(1)

实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中,通过引用来建立文件与html页面的关系,优先级最低,但是最灵活最好用,重用性最好. 经常用的就是内联和外部.外部的话需要引用. 选择器: id选择器:#id,优先级最高,只能选中一个元素class选择器:.class,优先级第二,能选中一堆元素标签选择器:标签名 div span ,优先级最低,能选中一堆元素,不建议

css 层叠式样式表

内联样式:样式优先级最高的 <div style="width:100px;height:100px;"></div> style=“” 用冒号和分号 width 宽度 height 高度 background-color  背景颜色 float:left; 多个div横向排列 流式布局 <div style="width:100px;height:100px;float:left;margin:5px;"></div>

css 层叠式样式表(3)

样式分类 大小 -- 调整div大小,长 width,高 height.长可以直接100%横向沾满屏幕,高不可以. 背景 background-color  背景色 background-image  背景图片  后面接url() 括号里填图片位置 background-repeat  背景图片的平铺方式  :no repeat  让图片只显示一次, background-position  背景图片的位置   center 居中 background-size  背景图片的大小  设置图片的长