层叠性

层叠性指的是样式的优先级,当产生冲突时以优先级高的为准,优先级相同时取后面定义的属性样式。

继承性

继承性指的是子孙元素可以继承父元素的属性。

记录一下开发中常用的继承属性:

  • 字体系列

    fontfont-stylefont-weightfont-sizefont-family

  • 文本系列

    text-aligntext-indentline-heightcolor

  • 元素可见性

    visibility

  • 光标属性

    cursor

优先级

CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准,specificity用一个四位数来表示,更像四级从左到右,左的最大级,一级大于一级,数位之间没有进制,多个选择符用到同一个元素上时那么specificity上值高的最终获得优先级。

贡献值

贡献值 权重
!important ∞ 无穷大
内联样式 1,0,0,0
ID选择器 0,1,0,0
类选择器,伪类选择器,属性选择器 0,0,1,0
标签选择器,伪元素选择器 0,0,0,1
通配符选择器 0,0,0,0

优先级总结:

!important > 内联样式 > ID 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器

注意:

权重的进制并不是十进制,可以理解为其不会向前进一位,100个类选择器的优先级也小于1个ID选择器 即: 0,0,9,0 < 0,1,00

栗子

#nav p : 0,1,0,1

.nav ul li : 0,0,1,2

a:hover : 0,0,1,1

div ul li::after : 0,0,0,4

!important

!important规则是一个bug级别的存在,优先级是无穷大。

一般来说,不要频繁使用!important规则,这是一个坏习惯,除非被逼无奈【老代码中写了很差劲的内联样式或者引用的JavaScript框架中使用了内联样式...】

参考文档

HTML中文网 - 如何理解css的层叠性

HTML中文网 - css优先级算法如何计算

CSS系列 (03):CSS三大特性的更多相关文章

  1. css系列教程--css文件的创建

    css文件的创建:1.外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.cs ...

  2. CSS系列:CSS的继承与层叠特性

    1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...

  3. CSS系列:CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  4. 深入理解css系列:css定位

    一.概述 1.默认文档流定位方式 (1).HTML默认文档以流模式定位,即内容元素按照先后顺序依次上下定位: (2).HTML标签元素总体分为块状元素.内联元素.内联块状元素,可通过该标签对应的DOM ...

  5. CSS系列(6) CSS通配符详解

    通配符使用星号*表示,意思是“所有的”. 平时使用电脑,比如要搜索C盘里所有的网页,可以使用 *.html来搜索,.html是网页的后缀名,*代表了所有网页的名称: 也就是使用 * 加后缀名,就可以在 ...

  6. CSS系列:CSS常用样式

    1. 通用样式 Base.css * { margin:; padding:; } body { width: 1000px; margin: 0 auto; font-size: 12px; fon ...

  7. CSS系列:CSS中盒子模型

    盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...

  8. CSS系列:CSS中盒子之间的关系

    1. 标准文档流 标准文档流是值在不使用其他的雨排列和定位相关的特殊CSS规则时,各种元素的排列规则. 1.1 块级元素(block level) 块级元素不会排在同一行中,总是以一个块的形式表现出来 ...

  9. CSS系列:CSS中盒子的浮动与定位

    1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...

随机推荐

  1. 自动化运维工具之Puppet基础入门

    一.简介 puppet是什么?它能做什么? puppet是一个IT基础设施自动化运维工具,它能够帮助系统管理员管理基础设施的整个生命周期:比如,安装服务,提供配置文件,启动服务等等一系列操作:基于pu ...

  2. C++反射机制:可变参数模板实现C++反射(二)

    1. 概要   2018年Bwar发布了<C++反射机制:可变参数模板实现C++反射>,文章非常实用,Bwar也见过好几个看了那篇文章后以同样方法实现反射的项目,也见过不少从我的文章抄过去 ...

  3. python之汉诺塔

    # -*- coding: utf-8 -*- def move(n, a, b, c): if n==1: print(a,'==>',c)#只有一块的时候直接从A到C即可 else: mov ...

  4. 使用paho的MQTT时遇到的重连导致订阅无法收到问题和解决

    最近在使用MQTT来实现消息的传输,网上demo很多,这里就不在重复介绍了,直接上代码,百度就能出现一大堆 下面是MQTT实现订阅的主要代码部分 MqttClient client = new Mqt ...

  5. 编写测试用例 QQ账号6--10位自然数 某城市电话号码 126邮箱注册功能

  6. navicat连接阿里云ESC里的数据库

    1.进入阿里云服务器 ssh 用户名@ip 2.进入数据库 mysql -u root -p 3.设置mysql数据库权限(允许其他服务器连接数据库)  grant all privileges on ...

  7. Python正则表达式re模块和os模块实现文件搜索模式匹配

    ☞ ░ 前往老猿Python博文目录 ░ 因测试需要,需要提供一个可以指定目录搜索符合条件的文件名函数,搜索时可以通过*(星号)匹配0-n个字符,?(问号)匹配任意1个字符,可以指定多个文件类型,每个 ...

  8. PyQt(Python+Qt)学习随笔:使用实例方法赋值方式捕获事件

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 在<第15.17节 PyQt(Python+ ...

  9. PyQt学习随笔:Qt中Model/View相关的主要类及继承关系

    View相关类类继承关系: Model相关类类继承关系:

  10. 第15.15节 PyQt(Python+Qt)入门学习:Designer的menu菜单、toolBar工具栏和Action动作详解

    老猿Python博文目录 老猿Python博客地址 一.引言 Qt Designer中的部件栏并没有菜单.toolBar以及Action相关的部件,仅在MainWindow类型窗口提供了menu.to ...