首先，我们梳理一下哪些属性会被继承

  • 文本

    • color 颜色，a元素除外
    • direction 方向
    • font 字体
    • font-family 字体系列
    • font-style 字体风格
    • font-size 字体大小
    • font-weight 字体粗细
    • letter-spacing 字母间距
    • line-height 行高
    • text-align 对齐方式
    • text-indent 首行缩进量
    • text-transform 大小写修改
    • visibility 可见性
    • white-space 指定如何处理表格
    • word-spacing 字符间距

  • 列表

    • list-style 列表样式
    • list-style-image 列表指定样式图片
    • list-style-position 列表标记的位置
    • list-style-type 列表标记的样式

  • 表格

    • border-collapse 控制单元格内边距是否存在
    • border-spacing 指定表格边距之间的空隙大小
    • caption-siede 指定表格标题的位置
    • empty-cells 指定是否显示i表格中的空单元格

  • 页面设置

    • orphans 指定当元素内部发生分页时在页面底部需要保留的最小行数
    • page-break-inside 设置元素内部的分页形式
    • windows 设置当元素内部发生分页是在页面顶部需要保留的最少行数

  • 其他

    • cursor 鼠标指针
    • quotes 指定引号样式

然后我们讨论一下，当规则发生冲突时：如何处理‘层叠’问题

  • 先考虑选择器优先级

    • 标签选择器1
    • 类选择器10
    • id选择器100
    • 复合选择器以最后的部分为主

  • 再寻找是否存在'! important'

　　如果为了避免其他属性的覆盖和影响，可以声明一条特殊的规则来覆盖一切，具体方法是这样的：如 p{ color：orange !important;}这样 这个属性将凌驾于一切而在页面上显示出来。

理解css属性的继承和覆盖的更多相关文章

  1. css中属性值继承小解

    继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的:display.margin.border.padding.back ...

  2. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  3. css样式重叠、css样式继承、css 属性计算，，a元素下的文字颜色不能继承

    1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...

  4. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  5. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  6. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  7. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  8. 《Head First HTML与CSS》的CSS属性

    关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...

  9. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

随机推荐

  1. python爬虫-User-Agent的伪造

    某些网站会识别python爬虫程序并阻断,通过构造User_Agent可以抵抗某些反爬虫机制 用fake-useragent这个库就能很好的实现 pycharm中安装步骤 产生随机的User-Agen ...

  2. python学习笔记(五)---函数与类

    函数 def为定义函数的一个标志 demo1: def greet_user(username): print("Hello, " + username.title() + &qu ...

  3. JS静态变量和静态函数

    本文链接:https://blog.csdn.net/u012790503/article/details/46278521 function A(){this.id = "我是AA&quo ...

  4. Taro 2.2 全面插件化，支持拓展和定制个性化功能

    自 2.2 开始,Taro 引入了插件化机制,允许开发者通过编写插件的方式来为 Taro 拓展更多功能或者为自身业务定制个性化功能,欢迎大家进行尝试,共同讨论~ 当前版本 2.2.1 官方插件 Tar ...

  5. Micropython教程之TPYBoard开发板驱动舵机教程（萝卜学科编程教育）

    大家应该都看到过机器人的手臂啊腿脚啊什么的一抽一抽的在动弹吧...是不是和机械舞一样的有节奏,现在很多机器人模型里面的动力器件都是舵机. 但是大家一般见到的动力器件都是像步进电机,直流电机这一类的动力 ...

  6. 2019年广东工业大学腾讯杯新生程序设计竞赛（同步赛）E-缺席的神官

    链接:https://ac.nowcoder.com/acm/contest/3036/E 来源:牛客网 题目描述 面前的巨汉,让我想起了多年前的那次,但这个巨汉身上散布着让人畏惧害怕的黑雾.即使看不 ...

  7. 题解 CF545A 【Toy Cars】

    题目传送门 太弱了,只能写写A题的题解 题意 给你一个 $n·n$ 的矩阵,翻车分三种情况: 如果 $a_i,_j=1$ ,记录第 $i$ 辆车 如果 $a_i,_j=2$ ,记录第 $j$ 辆车 如 ...

  8. win10 手动安装mysql-8.0.11-winx64.zip

    0.彻底删除win10上安装的mysql(转载 : https://www.cnblogs.com/jpfss/p/6652701.html) 1.去官网下载mysql-8.0.11-winx64.z ...

  9. awk调用date命令

    创建文件date.awk: $ == { cmd = "\"" while (cmd | getline line) { print line } close(cmd) ...

  10. 算法——Java实现队列

    顺序队列: 概念: 队列是一种先进先出的线性表,只允许在一端插入,另一端删除.允许插入的一端称为队尾,允许删除的一端称为队头 顺序队列的实现: import org.junit.jupiter.api ...