层叠机制和继承的概念以及CSS中选择器的优先级
层叠机制:
一个元素的某个特定的样式属性可能来自行间的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中选择器的优先级的更多相关文章
- CSS 从入门到放弃系列:CSS的选择器和优先级
CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...
- CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
- CSS中选择器优先级的权重计算
CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...
- 关于css中选择器的小归纳(一)
关于css中选择器的小归纳 一.基本选择器 基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器(类似于a,div,body,ul),类选择器(我们在HTML标签里面为其添加的clas ...
- css中!important的优先级问题
css中!important的优先级在主页面中写>在外部引用的css文件 之前我一直以为css的样式不管写在哪里只要加上!important那么它的优先级就是最高的,事实上并不是这样的,尤其在动 ...
- CSS中!important的优先级
本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
- css中选择器
css中常用的选择器有: 1.元素选择器:h1{} 如<h1></h1> 2.类选择器:.test{}或者h1.test{} 如<h1 class="test ...
- python 46 css组合选择器 及优先级 、属性选择器
一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器: d ...
随机推荐
- 领扣(LeetCode)删除链表的倒数第N个节点 个人题解
给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了倒数第二个节点后,链表变为 ...
- JAVA继承中子父类的构造方法
首先,构造方法本身会有一个隐式的无参构造(默认): ①不写构造方法,类中的第一行代码事实上有一个默认的无参构造(系统会隐式为你写好) public class Student { private St ...
- linux目录数
FHS Filesystem Hierarchy Standard(文件系统层次化标准,[ˈhaɪərɑ:rki] 等级制度)的缩写,多数Linux版本采用这种文件组织形式,类似于Windows操作系 ...
- 在ensp上利用三层交换机实现VLAN间路由
我们在实际生活中经常要跨vlan进行通信,我们的解决办法有单臂路由,但是单臂路由存在很大的局限性,带宽,转发效率等,所以单臂路由用的就有点少,所以就有了本章节 三层交换机在原有的二层交换机的基础上,增 ...
- Vue.js大屏数字滚动翻转效果
================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...
- odoo12 修行基础篇之 添加字段 (一)
本人刚刚接触odoo12,大概有2个多月的时间,这两天有点时间,就集中写下博客. 本来是打算整理成笔记,想到这段时间的开发经历,着实感觉网上有关odoo的资料太少,学习资料也不多,既然与odoo有缘, ...
- Python3 之 列表推导式
列表推导式(又称列表解析式)提供了一种简明扼要的方法来创建列表. 它的结构是在一个中括号里包含一个表达式,然后是一个for语句,然后是 0 个或多个 for 或者 if 语句.那个表达式可以是任意的, ...
- 2019-9-19:渗透测试,基础学习,html常用标签,笔记
HTML常用标签<br>:换行<meta charset="utf-8">:编码标签<script type="路径">:插 ...
- C语言与汇编语言混合编程实验
混合编程方法: 模块链接法 汇编指令嵌入法 1: 模块链接法则 模块链接法是指分别用汇编语言和C语言实现独立的模块(或子程序),再用链接程序把各模块生成的obj文件连接成一个可执行程序. 1:C语言调 ...
- just_connect.py
# -*- coding=utf-8 -*-from mysql.connector import connect config = { 'host': '192.168.199.139', 'por ...