css中各种层叠样式实例汇总

CSS（层叠样式表）用于规定HTML文档的呈现形式。凡事都有个先后顺序，凡物都有个论资排辈。一般情况下，看不出什么差异，即所谓的众生平等。但是，当发生冲突发生纠葛的时候，显然，是不可能做到完全等同的，先后顺序，身份差异就显现出来了。层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。本篇文章就是要聊一聊css层叠样式的具体作用。

首先可以学习相关的免费课程

1. 学习《弹指间学会HTML+CSS》中的 CSS层叠 教程

css层叠样式

1. CSS样式继承和层叠

特点：标签选择器会对当年页面当中所有的指定标签进行选择；标签选择器对代码的当前标签层次结构没有任何关联，只要是在当前页面上，都能被选中。

id选择：需要先指定一个标签设置id值（id值不能重复是整个页面中唯一的）。 class选择：通过给标签取类名，通过类选择器选择指定标签。

2. 详解CSS层叠机制

层叠样式表中的层叠意味着样式会从文档结构中的一个层次传递到另一个层次，其作用是让浏览器来决定在诸多源中，为某个标签应用来自哪个源的样式属性。

层叠是一种强大的机制。理解层叠有助于以最经济和最容易维护的方式来编写CSS，也有助于根据你的意愿创建出最理想的文档外观。

3. 详解CSS继承特性和层叠特性

第一个P没有使用选择器，所以采用HTML默认的显示颜色（黑色）

第二个P使用了类选择器，所以优先采用类选择器的颜色（红色）

第三个P使用了ID和类两个选择器，由于ID选择器的优先级高于类选择器，所以颜色显示为蓝色

第四个P使用了行内选择器和ID选择器，由于行内选择器优先级高于ID选择器，所以颜色显示为黄色

第五个P同时使用了两个类选择器，浏览器在解释网页时以第一个类选择器定义的颜色为准，所以颜色显示为紫色

第六个P同时使用了两个ID选择器，但由于ID选择器只能同时用于一个标记且全局唯一，所以浏览器认为这是一个非法的，颜色以其默认值显示（黑色）

4. 详细说明CSS层叠样式表

[attribute]选择具有attribute属性的元素。

[attribute=value]选择具有attribute属性且属性值等于value的元素。

[attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表，其中一个等于value的元素。

[attribute|=value]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素

[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素

[attribute*=value]匹配具有attribute属性、且值中含有value的E元素

5. 分析CSS样式表、继承、层叠和属性的值

CSS里有控制基本格式的属性（如font-size和color等），有控制布局的属性（如position和float等），还有决定访问者打印时在哪里换页的打印控制元素。除此之外还有其他很多的属性。
样式表中包含定义网页外观的规则，每条规则都有两个主要部分：选择器（selection）和声明块（declaration）。选择器决定哪些元素受影响，声明块有一个或多个属性-值对组成，制定应该怎么做。

6. CSS特殊性、继承与层叠

标记为!important的声明被称为重要声明，它没有特殊性，不过要与非重要声明分开考虑。

具体而言：非重要声明分为一组，它们之间的冲突使用特殊性解决；重要声明分为一组，它们之间的冲突内部解决；重要声明总是比非重要声明优先。

相关问答

1. 一个没有层叠上下文的元素如何比有的元素 z-index 更大?

2. ios webview 加载html文件，在9.2下没问题，但在8.1下底部出现横向排版层叠

【相关推荐】

1. 免费视频教程：《php.cn独孤九贱（2）－css视频教程》

2. 相关文章：CSS让DIV重叠实例总结

以上就是css中各种层叠样式实例汇总的详细内容，更多请关注其它相关文章！