层叠机制和继承的概念以及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 ...
随机推荐
- 【Error】Maven Dependency 下载失败问题
原文 前言 在使用Maven私服Sonatype Nexus的时候,经常会出现依赖包找不到的问题. 此时通过浏览器去私服页面查看,发现依赖包坐标是存在的,对应的文件(比如jar文件). 或者私服上面也 ...
- 一个ip, 两个域名, 两个ssl, 访问多个不同的项目
在前面一篇中说过, 入了好几个坑. 后来使用了nginx+tomcat配置的方式. 终于成功了. 因为头一次使用nginx, 不知道具体怎么操作, 于是我在操作的时候, 按照以下几个步骤执行的: 导航 ...
- nyoj 517-最小公倍数 (python range(start, end) range(length))
517-最小公倍数 内存限制:64MB 时间限制:1000ms 特判: No 通过数:2 提交数:11 难度:3 题目描述: 为什么1小时有60分钟,而不是100分钟呢?这是历史上的习惯导致. 但也并 ...
- oracle使用parallel并行,多线程查询
insert into tmp (select /*parallel (a, 4)*/ * from plsuer.as_cdrindex_info_h partition(P_20170430) w ...
- Charles 笔记
一. Charles工作原理 本质就是一个http抓包分析工具,在工作的时候将charles设置成代理服务器,所有网络请求都会经过Charles,这样就实现了网络封包的截取和分析. 主要功能 截取ht ...
- 2C 还是 2B,跟找工作有什么关系?
通常,我们会把公司的业务类型分成以下几种: 2C,to Customer,指面向个人客户的业务,即将公司的产品或服务销售给个人,通常做出购买决策的个人也是使用产品或服务的用户.举例说明,像 BAT 发 ...
- python基础-面向对象编程之继承
面向对象编程之继承 继承的定义:是一种新建类的方式,新建的类称之为子类或派生类,被继承的父类称之为基类或超类 继承的作用:子类会""遗传"父类的属性,从而解决代码重用问题 ...
- 学会这8个优秀 Python 库用于业余项目,将大大减少程序员耗费的精力
在数据库中即时保存数据:Dataset 当我们想要在不知道最终数据库表长什么样的情况下,快速收集数据并保存到数据库中的时候,Dataset 库将是我们的最佳选择.Dataset 库有一个简单但功能强大 ...
- 找到了element, 但是用getText却得到空值,取不到文本的解决办法
最近代码中发现一些bug, 在Debug过程中发现,页面元素是被定位到了,但是用getText方法取到的却是空值.调查了一下发现,getText是否返回值和isDisplayed是否为true有关.当 ...
- 题解 P3954 【成绩】
题目评级: ★ (水题) 内容及算法: 无,简单模拟计算即可 代码: /** *@author little_frog */ #include <bits/stdc++.h> using ...