1.继承

(1)样式应用于某个特定的HTML标签元素,而且应用于其后代。

(2)但某些标签不适用,如border;

(3)例子:p{color:red;}设置了颜色

<p class="first">

<p id="second">

效果一样。

2.特殊性

(1)当标签匹配多个样式,浏览器根据权值来判断适用哪种CSS样式,权值高就使用哪种。

(2)例子:

p{color:red;}
.first{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
“胆小如鼠”显示的是绿色的字体。
(3)规则:

3.层叠

(1)层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

(2)例子:

p{color:red;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
(3)设置样式层次一致,最后文本显示绿色,后面覆盖了前面的。
4.重要性
(1)为某些样式设置最高权值,使用important解决。
(2)语法:p{color:red!important;}
(3)例子:
p{color:red!important;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
(4)原来是绿色覆盖了红色,现在是红色覆盖了绿色,因为红色设置了最高权值。
 

CSS继承、层叠和特殊性的更多相关文章

  1. CSS选择器与CSS的继承,层叠和特殊性

    什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...

  2. HTML+CSS学习笔记(9)- CSS的继承、层叠和特殊性

    标签:HTML+CSS 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这 ...

  3. CSS中的层叠、特殊性、继承、样式表中的@import

    CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...

  4. css继承和层叠

    在前面介绍了如何利用文档结构和css选择器为元素应用各种丰富的样式,今天来好好聊聊css的层叠和继承,先说说概念. 继承:一个元素向其后代元素传递属性值所采用的机制,说的通俗点,就是元素的某些属性可以 ...

  5. 精通CSS高级Web标准解决方案(1-2 层叠与特殊性)

     层叠与特殊性 选择器的特殊性分成四个等级,a.b.c . d 如果样式是行内样式,那么a=1 b=ID选择器的总数 c=类.伪类.属性选择器的总数 d=标签选择器与伪元素选择器数量 例如:style ...

  6. CSS的“层叠”规则的总结

    当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下C ...

  7. 关于css中层叠性的一点理解

    关于css层叠性的一点理解 标签(空格分隔): html css 我们平时在写css的时候会遇到这样的情况 <!DOCTYPE html> <html lang="en&q ...

  8. 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  9. CSS继承总结

    CSS的一个重要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. CSS可以继承的属性有: 1.文字相关:font-famil ...

  10. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

随机推荐

  1. ASP.NET Core中使用IOC三部曲(二.采用Autofac来替换IOC容器,并实现属性注入)

    前言 本文主要是详解一下在ASP.NET Core中,自带的IOC容器相关的使用方式和注入类型的生命周期. 这里就不详细的赘述IOC是什么 以及DI是什么了.. emm..不懂的可以自行百度. 目录 ...

  2. C#学习笔记-抽象工厂模式

    题目1:数据访问,通过数据库对用户表单的进行访问,数据库包含SQL Server,对用户表单进行“新增用户”和“查询用户”信息等操作. 分析: 首先,确认用户表单,里面包含两个ID和Name两个字段, ...

  3. ubuntu16中遇到libgstreamer-0.10.so.0缺失解决方案

    1. error while loading shared libraries: libgstreamer-0.10.so.0: cannot open shared object file: No ...

  4. 图书管理系统设置登录验证(cookies)

    先前做的图书管理登录页面虽然有那个页面,在你登录之后他会在数据库中查找值,然后验证,最后跳转到指定页面,,可是当你直接访问那个指定页面的时候不用登录也可以登录那个指定的页面: 由于前段时间已经做过图书 ...

  5. JDBC简单范例

    连接工具类 import java.sql.Connection; import java.sql.DriverManager; public class DBUtil { // 建立连接方法 pub ...

  6. web前端性能优化总结

    网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现.并且影响用户访问体验的绝大部分来自前端页面 ...

  7. 学习笔记-使用cmd命令行创建nodejs项目

    使用cmd命令行创建nodejs项目 1)在DOS下cd 进入到你想要创建项目的路径. 2)mkdir sing (创建一个sing文件夹) 3)cd sing  4) npm init (初始化工程 ...

  8. Java面向对象接口的应用实例练习

    interface USB { public void open(); public void close(); } class Upan implements USB { public void o ...

  9. bzoj:3392: [Usaco2005 Feb]Part Acquisition 交易

    Description     奶牛们接到了寻找一种新型挤奶机的任务,为此它们准备依次经过N(1≤N≤50000)颗行星,在行星上进行交易.为了方便,奶牛们已经给可能出现的K(1≤K≤1000)种货物 ...

  10. POJ3264-Balanced Lineup-线段树

    Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 53721   Accepted: 25244 ...