层叠机制:

  一个元素的某个特定的样式属性可能来自行间的style属性、内联样式表或者外部引入的样式表,以及浏览器自定义的样式,还有就是继承自父元素的样式,但是最终只会选择其中的某一个来表示,这个选择的过程就被称为层叠(cascading)。

继承机制:

  在继承机制中,样式不仅会应用到指定的元素,还会应用到它的后代中没有设置特定样式的元素,他的后代元素的样式就是继承自它父级的样式,但是不是父级所有的样式都会被继承,一般关于文字的样式都会被继承下来。

选择器的优先级:

  !important>行内样式>id选择器>类选择器>元素选择器>通配符>继承

  内嵌样式的个数 id选择器的个数 类选择器的个数 元素选择器的个数
行内样式 1 0 0 0
id选择器 0 1 0 0
类选择器、伪类选择器 0 0 1 0
元素选择器、伪元素选择器 0 0 0 1
通配符 0 0 0 0
!important 最高 最高 最高 最高

  优先级的计算方法:权重;(0,0,0,0)

  第一个0表示内嵌的个数,第二个表示的是id选择器的个数,

  第三个是类选择器的个数,第四个是元素选择器的个数,

  然后多个选择器组合后的优先级就是权重,层叠样式会选择权重大的。

  即元素的样式会由权重最大的选择器里面设置的属性决定。

层叠机制和继承的概念以及CSS中选择器的优先级的更多相关文章

  1. CSS 从入门到放弃系列:CSS的选择器和优先级

    CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...

  2. CSS中选择器优先级顺序实战讲解

    原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...

  3. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

  4. 关于css中选择器的小归纳(一)

    关于css中选择器的小归纳 一.基本选择器 基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器(类似于a,div,body,ul),类选择器(我们在HTML标签里面为其添加的clas ...

  5. css中!important的优先级问题

    css中!important的优先级在主页面中写>在外部引用的css文件 之前我一直以为css的样式不管写在哪里只要加上!important那么它的优先级就是最高的,事实上并不是这样的,尤其在动 ...

  6. CSS中!important的优先级

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

  7. css中选择器的使用

    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...

  8. css中选择器

    css中常用的选择器有: 1.元素选择器:h1{}  如<h1></h1> 2.类选择器:.test{}或者h1.test{} 如<h1 class="test ...

  9. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

随机推荐

  1. tornado的使用-上传图片

    tornado的使用-上传图片

  2. 使用 Casbin 作为 ThinkPHP 的权限控制中间件

    PHP-Casbin 是一个强大的.高效的开源访问控制框架,它支持基于各种访问控制模型的权限管理. Think-Casbin 是一个专为 ThinkPHP5.1 定制的 Casbin 的扩展包,使开发 ...

  3. [error]The command could not be located because '/usr/bin' is not included

    配置HBase环境变量的时候写错了,写成了如下: 之后便报错 解决: 系统命令找不到时,通常是路径不对,直接在命令行用全路径即可,配置环境变量时,加入自己的环境变量,还要附带上之前的变量.如最后加上: ...

  4. Mysql备份还有这么多套路,还不了解下?

    逻辑备份和物理备份 逻辑备份 逻辑备份用于备份数据库的结构(CREAET DATABASE.CREATE TABLE)和数据(INSERT),这种备份类型适合数据量小.跨SQL服务器.需要修改数据等场 ...

  5. 【故障公告】数据库服务器 CPU 近 100% 引发的故障(源于 .NET Core 3.0 的一个 bug)

    非常抱歉,这次故障给您带来麻烦了,请您谅解. 今天早上 10:54 左右,我们所使用的数据库服务(阿里云 RDS 实例 SQL Server 2016 标准版)CPU 突然飙升至 90% 以上,应用日 ...

  6. 认证域名与SSL证书的区别

    一.认证域名与SSL证书的区别 SSL 证书使访问者的 Web 浏览器和网站的服务器之间的安全. 加密连接,并确保交易的安全从篡改和拦截.认证域名向网站访客的注册和控制该网站的域名已验证.认证域名并不 ...

  7. (三十六)golang--文件的基本操作

    文件程序中是以流的形式操作的. 流:数据在数据源(文件)和程序(内存)之间经历的路径: 输入流:数据从数据源到程序的路径: 输出流:数据从程序到数据源的路径: 常用的文件操作和函数: 1.常用的文件操 ...

  8. jinjia2

    ansible-playbook --become --become-method=su -K copy.yml - hosts: web remote_user: ansible tasks: - ...

  9. Python 编程语言要掌握的技能之一:编写条件分支代码的技巧

    Python 里的分支代码 Python 支持最为常见的 if/else 条件分支语句,不过它缺少在其他编程语言中常见的 switch/case 语句. 除此之外,Python 还为 for/whil ...

  10. 折腾笔记-计蒜客T1158-和为给定数AC记

    欢迎查看原题 1.简单题目叙述 蒜头君给出若干个整数,询问其中是否有一对数的和等于给定的数. 输入格式 共三行: 第一行是整数 ),表示有 n 个整数. 第二行是 n 个整数.整数的范围是在 0 到  ...