一、特指度

特制度的一般形式是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. sql查询字段语句

     SELECT * from jd_content where 景点简介 like '%东城%' 

  2. Shell系列（17）- 配置文件功能（待完善）

    配置文件功能 文件名 功能 相关联命令 /etc/profile USER变量 LOGNAME变量 MAIL变量 PATH变量 HOSTNAME变量 umask 调用/etc/profile.d/*. ...

  3. yapi 事件创建、修改等接口事件监听

    使用的yapi作为接口文档平台.出于业务需求需要对接口创建.修改.删除等事件进行监听. yapi已经实现并预留了这个口子,但是没有找到实现的文档.这里进行简单描述下使用的方式. 一.yapi创建.修改 ...

  4. git 要求密码的解决方法：【生成gitLab公钥】：以及如何配置GitLab中的SSH key

    参考链接: https://www.cnblogs.com/yjlch1016/p/9692840.html https://blog.csdn.net/u011925641/article/deta ...

  5. jmeter跑脚本的注意事项

    指标主要看以下几点: 1.jmeter性能测试的报告,不要看平均响应时间,而是看90%响应时间,一般不能超过3s,超过3s则不符合标准2.响应时间超过3s就要优化,但不是平均响应时间,因为最小响应时间 ...

  6. 检验appium环境是否正常：使用appium自动给手机安装app（注意：如果已存在该app，再执行会将原来的卸载再重装，需谨慎）

    (注意:如果已存在该app,再执行会将原来的卸载再重装.泪的教训,我的微信被卸载重装了o(╥﹏╥)o,自动安装app这个步骤需谨慎操作) hi,前面几篇已经讲了appium环境的搭建.设备的连接, 那 ...

  7. hexo配合github action 自动构建（多种形式）

    已经使用HEXO正常构建GitHub页面 根据github action 给hexo配置自动部署github page 前往墨抒颖的个人网站查看纯净版 1. 为仓库设置访问密钥 第一步先生成密钥,打开 ...

  8. windwos10安装mysql8.0.20详细图文教程

    windwos10安装mysql8.0.20详细图文教程 1.浏览器搜索mysql下载安装 地址:https://dev.mysql.com/downloads/mysql/ 2.登录或者不登录下载 ...

  9. 数据库InnoDB和MyISAMYSQL的区别

    1.nnoDB支持事务,MyISAM不支持,这一点是非常之重要.事务是一种高级的处理方式,如在一些列增删改中只要哪个出错还可以回滚还原,而MyISAM就不可以了. 2.MyISAM适合查询以及插入为主 ...

  10. 测试开发【提测平台】分享12-掌握日期组件&列表状态格式化最终实现提测管理多条件搜索展示功能

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 本章内容思维导图如下,由于需要各种状态下的菜单操作,所以需要先实现提测信息的列表基础页面,然后再推进其他需求开发 基本知识点学习 Date ...