CSS的继承性与优先级
一、CSS的继承性
在CSS中不可继承的属性:display、margin、padding、border、background、width、min-width、max-width、height、min-height、max-height、overflow、position、left、right、top、bottom、z-index、float、clear、vertical-align、page-break-after、page-break-before等
所有元素可继承的属性:visibility和cursor
内联元素可继承的属性:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块元素可继承的属性:text-align和text-indent
列表元素可继承的属性:list-style、list-style-type、list-style-position、list-style-image
表格元素可继承的属性:border-collapse
二、CSS的优先级
样式的优先级:
多重样式(如果外部样式、内部样式和内联样式同时应用于同一个元素)的情况下,优先级为:内联样式 > 内部样式 > 外部样式 。有个例外的情况,当外部样式位于内部样式的后面时,外部样式将覆盖内部样式
选择器的优先级:
(1)内联样式表的权值最高为1000
(2) id 选择器的权值为100
(3) class 类选择器的权值为10
(4) html 标签选择器的权值为1
一个CSS样式的权值 = 出现的各级别的选择器的权值分别相加;
例如:
在外部CSS文件中或<style>标签中如下定义:
p {color: red;} /*一个标签选择器,权值为1*/
div p {color: red;} /*两个标签选择器器,权值为2*/
#te .tt {color: red;} /*一个id选择器,一个类选择器,权值为110*/
在某个标签的style属性中如下定义:
p {color: red;} /*在内联样式表中定义,一个标签选择器,权值为1001*/
优先级法则:
1、选择器都有一个权值,权值越大越优先;
2、当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
3、创作者的规则高于浏览者,即网页编写者设置的CSS样式的优先级高于浏览器所设置的样式;
4、继承的CSS样式不如后来指定的CSS样式;
5、在同一组属性中标有“!important”规则的优先级最大;
例如:
//css p {color:red;} #test p {color:green;} //html <p>test1</p> <div id="test"><p>test2</p></div>
结果如下:
CSS的继承性与优先级的更多相关文章
- css的继承性
为了减少css的代码量,很多时候,我们必须要非常重视css的继承性 1.首先,有些属性是不能继承的.这没有任何原因,只是因为它就是这么设置的.举个例子来说:border属性,大家都知道,border属 ...
- CSS的继承与优先级
CSS样式继承性 body,div,p{} html文档可以上图的种种节点树的形式表示,css层叠样式表中的各元素也有这种对应关系 <body>是文档中最大的根节点,body中的所有元素都 ...
- CSS样式----CSS的继承性和层叠性(图文详解)
CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS学习之选择器优先级与属性继承
CSS学习之选择器优先级与属性继承 选择器优先级 其实选择器是具有优先级的,我们来看下面这一组案例: <!DOCTYPE html> <html lang="en" ...
- CSS样式定义的优先级顺序总结
CSS样式定义的优先级顺序总结 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其中样式表又有: 类选择器 < 类派生选择器 < ID选择器 & ...
- css中!important的优先级问题
css中!important的优先级在主页面中写>在外部引用的css文件 之前我一直以为css的样式不管写在哪里只要加上!important那么它的优先级就是最高的,事实上并不是这样的,尤其在动 ...
- CSS 从入门到放弃系列:CSS的选择器和优先级
CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...
- css 的继承性
目录 css 的继承性是什么? 父元素的属性那些可以被子元素继承,哪些不能呢? css 的继承性是什么? 在面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法. 那么 ...
随机推荐
- 夏令营提高班上午上机测试 Day 4 解题报告
我要是没记错的话,今天的题难度算挺适中的. *标程来自高天宇哥哥 T1:小G的字符串 题目描述 有一天,小 L 给小 G 出了这样一道题:生成一个长度为 n 的.全由小写英文字母构成的字符串,只能使用 ...
- "_OBJC_CLASS_$_MAMapServices", referenced from: 的问题修复
今天将高德地图集成到ios模拟器编译出现了一个错误 Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_MAMapServic ...
- JDBC常见面试题
以下我是归纳的JDBC知识点图: 图上的知识点都可以在我其他的文章内找到相应内容. JDBC常见面试题 JDBC操作数据库的步骤 ? JDBC操作数据库的步骤 ? 注册数据库驱动. 建立数据库连接. ...
- 好用的Google漏洞爬虫:Google Mass Explorer
这是一款基于谷歌搜索引擎的自动化爬虫. 爬虫介绍 爬虫大体机制就是: 先进行一次谷歌搜索,将结果解析为特定格式,然后再提供给exp使用. 大家可以尝试使用–help来列出所有参数. 这个项目笔者会持续 ...
- Vue站点的搭建之旅
背景 很久没写博客了,这次博客分享一下最近上班空闲时间做的两个业余Demo.分别是V电影App的移动端站点[一直很喜欢用这个APP可是他们没有出对应的mobile端,所以自己开发一个, ...
- 开启Nginx的目录文件列表功能
ngx_http_autoindex_module 此模块用于自动生成目录列表,ngx_http_autoindex_module只在 ngx_http_index_module模块未找到索引文件时 ...
- Sqlserver将数据从一张表插入到另一张表
1.如果是整个表复制表达如下: insert into table1 select * from table2 2.如果是有选择性的复制数据表达如下: insert into table1(colum ...
- 软AP的实现------hostapd的编译运行
最近要给摄像头做一个软ap,让手机能够连上这个热点,从而能够与摄像头进行通信. 1.什么是hostapd : hostapd能够使得无线网卡切换为master模式,模拟AP(通常可以认为是路由器)功能 ...
- UVALive - 3644 X-Plosives (并查集)
思路:每一个product都可以作一条边,每次添加一条边,如果这边的加入使得某个集合构成环,就应该refuse,那么就用并查集来判断. AC代码: //#define LOCAL #include & ...
- HDU - 2612 bfs [kuangbin带你飞]专题一
分别以两个人的家作为起点,bfs求得到每个KFC最短距离.然后枚举每个KFC,求得时间之和的最小值即可. 此题不符合实际情况之处: 通过了一个KFC再去另一个KFC可以吗? 出题人都没好好想过吗? ...