css通过建立与文档的关联而实施效果。文档结构重要性不言而喻,对于建立良好的内容索引、提高可维护性、较好的可访问性;另,利于css选择器选择、继承机制。

概要地讲,层叠机制是处理对文档上应用样式时解决该应用何种样式的解决方案,涉及到重要性、特殊性、来源、顺序的问题。下面分别说明。

概要

     每条声明都是有特殊性的,其特殊性由选择器组件确定。用户代理会将特殊性赋予给每条声明。由于存在选择器分组和声明分组的情况,用户代理会将它们解组出来的。然后对应个元素可能会有多条规则。这时,若都是针对相同的属性,那使用何种规则呢?这是层叠机制解决的问题。

特殊性:

特殊性值结构:x,x,x,x。x代表一个自然数。左边比右边的值大。1、内联样式的特殊性为1,0,0,0,其他首位为0。 2、id特殊性为0, 1,0,0。

3、伪类、类、属性选择的特殊性为0,0,1,0。4、元素、伪元素特殊性为0,0,0,1。5、继承没有特殊性。结合符没有特殊性。通配符特殊性为0,0,0,0。使用上,当重

要性、来源相同条件相同时,特殊性大的获胜。

重要性:

      重要性真的重要,使用上将!important置于";"前面就可以了,注意是关键词的最后。用户代理将重要性的分在一组,普通的分在一组,声明冲突时,重要性的占上

风。但是重要性不会改变特殊性;就是说重要性分组中出现冲突后,按特殊性来。当然还要考虑来源,一般在权重上是创作人员>用户>用户代理。结合起来权重的顺序

是:用户重要声明、创作人员重要声明、创作人员普通声明、用户的普通声明、代理的默认声明。

继承

     就是元素向后代传递属性值的机制,但是未必可靠,与浏览器有关。此外,继承是有限制的,限制了一些与盒模型相关的属性例如:外边距、内边距、背景、边框等

问题。它的特殊性不存在,比通配符还要低,所以不要随意使用通配符选择器。

顺序

     顺序是指当重要性、来源、特殊性等相同的时候,后面的权重会比前面的权重要大。通常是导入的文件的声明在前面。css2.1中认为内联样式的特殊性为

1,0,0,0。css2认为特殊值是0,1,0,0。从顺序上讲,内联样式顺序认为是在后面。

层叠

    既然元素上会有多条规则,可能这些声明是关于相同的属性的。由此,需要层叠。

1、重要性和来源。见上重要性。

2、考虑特殊性,特殊性大的权重也大。

3、顺序。顺序在后面的权重大。

非css结构

       考虑到html中含有用于控制表现的元素,特殊性上是0,0,0,0。顺序认为在创作人员样式表前面,用户样式表、创作人员样式表会将其覆盖掉,用户代理部可以。

     

css层叠机制说明的更多相关文章

  1. css考核点整理(二)-css层叠机制

    css层叠机制 外边距重叠就是margin-collapse. 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距.这种合并外边距的方式被称为折叠,并且因 ...

  2. 关于CSS层叠机制

    谈到层叠机制,首先我们要知道什么是声明冲突. 声明冲突有三个条件:①多个选择器选中同一个元素:②声明块里的属性相同:③属性的属性值不同.同时满足这三点时就会产生声明冲突.比如下图html代码: < ...

  3. 三.CSS层叠机制

    概述 层叠就是对样式的层叠.是某种样式在样式表中逐层叠加的过程.让浏览器对某个标签特定属性值的多个来源,最终确定使用那个值.层叠是整个CSS的核心机制. HTML文档样式的来源 1.浏览器默认样式,每 ...

  4. CSS引用方式及样式层叠机制

    CSS引用方式有3种,三种分别为:外部引入.内部引入.行内样式,下面一 一进行介绍. 1.外部引入:CSS代码在一个独立的文件中,HTML通过Link标签引入到页面. 代码格式:<link re ...

  5. CSS中的样式层叠机制Cascade

    CSS中的样式层叠机制Cascade 一.样式冲突   样式冲突是CSS渲染过程要解决的一个关键问题,样式冲突主要由两个原因造成: 元素包含了不同对象所赋予的样式:浏览器.用户.作者.其中,浏览器样式 ...

  6. 层叠机制和继承的概念以及CSS中选择器的优先级

    层叠机制: 一个元素的某个特定的样式属性可能来自行间的style属性.内联样式表或者外部引入的样式表,以及浏览器自定义的样式,还有就是继承自父元素的样式,但是最终只会选择其中的某一个来表示,这个选择的 ...

  7. CSS层叠

    前面的话 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 ...

  8. css层叠规则,优先级算法

    前言 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 特 ...

  9. css层叠规则(层叠样式表)

    CSS层叠规则: 1.找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器. 2.按权重(!important)和来源对应用到给定元素的所有声明进行排序. 3.按特殊性对应用到给定元素的所有声 ...

随机推荐

  1. 使用秘钥对登录Linux系统

    一,用密码登录系统,可能由于密码的简单或者其他原因造成被其他人登录,这样服务器可是很不安全的,为此我们可以使用秘钥登录系统. 二, 1,设置密钥对前,我们需要下载一个工具 https://the.ea ...

  2. <转>让SVN用户能够修改自身密码的PHP页面

    1.修改Apache配置文件因为我在安装和配置SVN的时候,对Apache的配置文件进行过优化,将所有关于SVN的配置都写在了/opt/apache2/conf/extra/httpd-svn.con ...

  3. html 基础之 <link>标签

    实例 链接一个外部样式表: <head> <link rel="stylesheet" type="text/css" href=" ...

  4. 动态链接库的生成(dll)和 动态链接库隐式and显式调用

    一.构建动态链接库(dll.dll dll.lib dll.h) 说明: .dll 是在执行程序是调用  .lib 是在连接程序是调用  .h是在编译程序时调用 1.头文件(声明导入函数):_decl ...

  5. css3实现一个div设置多张背景图片及background-image属性

    CSS3/CSS1 background-image 属性 语法: background-image:<bg-image> [ , <bg-image> ]* <bg-i ...

  6. 资源回收 left

    select DISTINCT human.tid,log_pv_change.systafftid from human left join human_user on human.tid=huma ...

  7. Nginx 变量漫谈(七)

    在 (一) 中我们提到过,Nginx 变量的值只有一种类型,那就是字符串,但是变量也有可能压根就不存在有意义的值.没有值的变量也有两种特殊的值:一种是“不合法”(invalid),另一种是“没找到”( ...

  8. D、GO、Rust 谁会在未来取代 C?为什么?——Go语言的定位非常好,Rust语言非常优秀,D语言也不错

    不要管我的地位和 D 语言创造者之一的身份.我会坦诚的回答这个问题.我熟悉 Go 和 Rust,并且知道 D 的缺点在哪里.我鼓励人们在 Rust 和 Go 社区相似身份的人,也可以提出他们诚恳的观点 ...

  9. poj 2632 Crashing Robots_模拟

    做的差点想吐,调来调去,编译器都犯毛病,wlgq,幸好1a. 题意:给你机器人怎走的路线,碰撞就输出 #include <cstdlib> #include <iostream> ...

  10. xmpp总结

    1. 浅谈对于XMPP协议自己的看法以及对其理解 http://blog.sina.com.cn/s/blog_69f68f880102uyeg.html 2. XMPP协议学习笔记一 http:// ...