一、特指度

特制度的一般形式是0,0,0,0

  • 行内样式,第一位的特指度加一
  • id选择符,第二位的特指度加一
  • 类选择符、属性选择符、伪类,第三位的特指度加一
  • 元素选择符、伪元素,第四位的特指度加一

特指度是从左向右比较的,特指度高的声明胜出。

重要声明:在声明末尾的分号之前插入 !important( 重要声明和非重要声明冲突时,始终胜出 )

二、继承

继承指的是,某些样式不仅应用到所指的元素上,还应用到元素的后代上( 最典型的就是font-family )

下面是继承的两个注意点:

  1. 继承的值没有特指度,连0都没有,通用选择符( * )的特指度都比他大。所以最好不要在通用选择符里面设置可能继承的值( 除非你雀食要这么做 ),以免出现零特指度战胜无特指度的情况,导致终结继承。
  2. 继承的值没有特指度,但是有的时候样式无法继承,可能是因为浏览器的内部样式表里面有设置该样式( 浏览器设置的样式就有了特指度,导致无法继承 )

三、层叠

层叠规则先后顺序如下

  1. 按显示权重( !important )和来源排序( 创作人员样式表覆盖用户代理样式表 )
  2. 按特指度排序,特指度高的规则胜出
  3. 按前后位置排序,越靠后的规则胜出(由此可得链接样式的推荐样式:LVFHA)

CSS学习(三)特指度和层叠的更多相关文章

  1. CSS 优先级和特指度

    1.ID 选择符 > 类选择符 > 元素选择符.特指度高的优先级高 2.行内样式 > 内嵌样式 > 链接样式 3.设定的样式 > 继承的样式 特指度的计算: 特指度能够用 ...

  2. Css学习(三)

    1 行高 ◆浏览器默认文字大小 浏览器默认文字大小:16px 行高:是基线与基线之间的距离 行高=文字高度+上下边距 一行文字行高和父元素高度一致的时候,垂直居中显示. 行高的单位 总结:单位除了像素 ...

  3. 一篇文章带你初步了解—CSS特指度

    CSS特指度 说明 这篇博客在在两台电脑上分别完成的,故而有些截图是Firefox,有些是Chrome,有些改动了浏览器的用户样式表,有些没改,但不会影响阅读,特此说明,勿怪. CSS选择器 单个CS ...

  4. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  5. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  6. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  7. css学习归纳总结(一) 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  8. CSS学习目录

    前面的话 CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实.可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进java ...

  9. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

随机推荐

  1. Java基础系列(27)- 什么是方法

    何谓方法 System.out.println();它是什么呢 # System:类 # out:对象 # println():方法 Java方法是语句的集合,它们在一起执行一个功能 方法是解决一类问 ...

  2. git pull 时remote: HTTP Basic: Access denied解决方案

    当qian windows用户密码过期更改了密码后,操作git pull 拉取远程仓库代码或git push时报错 如下:remote: HTTP Basic: Access denied  Auth ...

  3. Kafka与RocketMq文件存储机制对比

    一个商业化消息队列的性能好坏,其文件存储机制设计是衡量一个消息队列服务技术水平和最关键指标之一. 开头问题 kafka文件结构和rocketMQ文件结构是什么样子?特点是什么? 一.目录结构 Kafk ...

  4. 判断javaScript变量是Ojbect类型还是Array类型

      JavaScript是弱类型的语言,所以对变量的类型并没有强制控制类型.所以声明的变量可能会成为其他类型的变量, 所以在使用中经常会去判断变量的实际类型. 对于一般的变量我们会使用typeof来判 ...

  5. HTML 网页开发、CSS 基础语法——十.CSS语法

    CSS代码书写位置 • CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明 1.内联式 ① 内联式简介 •内联式,也被习惯叫做行内式. •书写位置:在 HTML 标签之上的 style 属性 ...

  6. 痞子衡嵌入式:MCUBootUtility v3.4发布,支持串行NAND

    -- 痞子衡维护的 NXP-MCUBootUtility 工具距离上一个大版本(v3.3.0)发布过去 4 个多月了,这一次痞子衡为大家带来了版本升级 v3.4.0,这个版本主要有几个非常重要的更新需 ...

  7. 基于SpringBoot+Mybatis plus+React.js实现条件选择切换搜索功能

    笔记/朱季谦 在写React前端逻辑时,经常遇到可以切换不同条件的列表查询功能,例如下边截图这样的,其实,这块代码基本都一个逻辑,可以一次性将实现过程记录下来,待以后再遇到时,直接根据笔记复用即可. ...

  8. react-native移动端设置android闪屏页

    前言 因为app启动时会白屏一段时间,导致让人用起来非常的不舒服,后来了解一下知道这叫做闪屏 于是着手解决这个白屏的问题,换个颜色?不行,不如用一张好看的图片来替换,这样才让人看起来更加舒服. 那么该 ...

  9. java/ kotlin下的单例模式

    单例模式属于创建型模式, 顾名思义,就是说整个系统中只有一个该对象的实例. 为什么要使用单例模式? 1, 对于一些需要频繁创建,销毁的对象, 使用单例模式可以节省系统资源 2, 对于全局持有的对象,单 ...

  10. 魔改swagger:knife4j的另外一种打开方式

    之前公司使用了swagger作为文档管理工具,原生的swagger-ui非常丑,之后就用了开源项目 萧明 / knife4j 的swagger组件进行了swagger渲染,改造之后界面漂亮多了,操作也 ...