Css - 三大特性
css - 三大特性
1.继承性
祖先元素的关于文本的样式会遗传给后代元素,其它则不会。后代元素会继承祖先元素的关于文本的css样式(水平对齐、字号、字色、行高等)。但a元素不会应用继承来的color,这是因为父元素设置{ color:xx }虽然可以 遗传给子a元素,但子a元素的color有默认的定义(a:link:{ color:blue })。
2.层叠性
如果通过两个相同选择器设置了同一个元素的某个相同的css属性,按照css相同属性的出现顺序,后面的样式会覆盖前面的样式
width: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-weight: 900;
margin: 10px auto;
}
#box {
background: red;
}
#box {
background: black; //覆盖了红色
}
<div id="box">H</div>
3.优先性(权重)
如果通过不同的选择器设置了同一个元素的同一个css属性,则浏览器在应用css样式时会判定选择器的权重,权重最大的会被首先考虑。
单个权重的计算
2.行内样式=1000,直接在html标签里通过style设置的样式
3.id选择器=0100
4.类选择器=0010
5.标签选择器=0001
6.*=0000
id=0100>html tag=0001,所以会应用id所设置的css样式,html标签选择器的样式被忽略
background: red;
}
权重0001
div {
background: black; //被忽略
}
<div id="box">H</div>
多个权重的计算
width: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-weight: 900;
margin: 10px auto;
background: red;
}
0100 id权重值
+ 0001 标签权重值
= 0101
#box span {
background: #4800ff;
}
0001 标签权重值
span {
background: black;
}
0101>0001,选择了#box span选择器的设置,span选择器被忽略
style>
ad>
y>
<div id="box">
<span>H</span>
</div>
权重叠加没有进制,不是满十进一,而是满十向后补0
0001
0001
0001
0001
0001
0001
0001
0001
+ 0001
= 00010
div div div div div div div div div a {
color: red;
}
0100
#link {
color: black;
}
*号选择器的权重是0000,但important的权重是无穷大
* {
color: green !important;
}
最终选择了*号选择器的设置
父子权重计算
无论父的优先级的值有多高,子继承后就是0或none。
color:black !important;
}
a{
color: red;
}
<div><a href="#" id="link">首页</a></div> //取red
通配符选择的是元素自身,此时通配符要大于从父元素继承的权重
*{ color:#000; }
<div><p>fuck gov</p></div> //p标签的color取值#000
Css - 三大特性的更多相关文章
- CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- CSS三大特性(继承、优先级、层叠)之个人见解
首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...
- python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- CSS 三大特性 层叠 继承 优先级
css三大特性 层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则 继承性: 子标签会继承父标签的某些样式 ...
- css三大特性及权重说明
一.三大特性简述 层叠性: 后来的覆盖前面的 (长江后浪推前浪) 继承性: 子标签会继承父标签的某些样式 (跟文字有关的一般都会继承) 优先级: 设计到一个算法“css特殊性(Specificity) ...
- 前端面试 CSS三大特性
CSS的三大特性 1.层叠性 代码由上向下执行,相同选择器设置到同一元素上,样式冲突的,会执行比较靠近html的样式,样式不冲突的情况下不影响 代码如下 <!DOCTYPE html> & ...
- CSS系列 (03):CSS三大特性
层叠性 层叠性指的是样式的优先级,当产生冲突时以优先级高的为准,优先级相同时取后面定义的属性样式. 继承性 继承性指的是子孙元素可以继承父元素的属性. 记录一下开发中常用的继承属性: 字体系列 fon ...
- css的三种引入方式、常用的元素选择器以及css三大特性
第一.html文件中如何使用css html文件中使用css有3种方式:链接式.嵌入式.行内式,推荐使用程度依次递减:1.链接式:在html文件通过<link />标签引入,rel属性值必 ...
- CSS【05】:CSS三大特性
继承性 作用:给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性 示例代码: <style> div { color: red; } </style> <di ...
随机推荐
- python学习笔记-Day2 Numpy数组
1. 实现两个数组相加,在数据量特别大的时候 产生数组: (1) 从列表产生数组:a=[0,1,2,3] a=np.array(1) a (2) 从列表传入 a=np.array([1,2,3,4 ...
- errorC2504未定义基类
这一般是在有继承时,头文件引用错误 例如: A.cpp文件 A .h文件 #include ...
- linux driver ------ 字符设备驱动 之 “ 创建设备节点流程 ”
在字符设备驱动开发的入门教程中,最常见的就是用device_create()函数来创建设备节点了,但是在之后阅读内核源码的过程中却很少见device_create()的踪影了,取而代之的是device ...
- phpmyadmin拿webshell
思路:就是利用mysql的一个日志文件.这个日志文件每执行一个sql语句就会将其执行的保存.我们将这个日志文件重命名为我们的shell.php然后执行一条sql带一句话木马的命令.然后执行菜刀连接之! ...
- maven_环境变量配置
- python 基础技巧
多个字典合并 >>> d1 = {'name' : 'revotu', 'age' : 99} >>> d2 = {'age' : 24, 'sex' : 'mal ...
- Linux系统IO分析工具之iotop常用参数介绍
Linux系统IO分析工具之iotop常用参数介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在一般运维工作中经常会遇到这么一个场景,服务器的IO负载很高(iostat中的 ...
- 网络编程基础【day09】:堡垒机前戏(十一)
本节内容 1.堡垒机前戏 2.SSHClient 3.SFTPClient 一.堡垒机前戏 开发堡垒机之前,先来学习Python的paramiko模块,该模块机遇SSH用于连接远程服务器并执行相关操作 ...
- 利用 JMetal 实现大规模聚类问题的研究(二) JMetal代码总览
之前完成了导入JMetal到自己的工程这一步. 在开始我们研究的问题之前,我们先对JMetal的源代码一个全局的认识. JMetal很好地利用了面向对象的特性,对所有的优化问题做了高度的抽象,建议有空 ...
- MyBatis-Configuration
一.引用 properties 配置文件 db.properties driver=com.mysql.cj.jdbc.Driver url=jdbc:mysql://192.168.8.136:33 ...