CSS篇-CSS三大特性
2018-07-15 本文已影响8人
TianTianBaby223
一 : 层叠性
浏览器处理冲突的一种能力,以CSS的书写顺序,以下面的样式为准.
类似英语的就近原则
总结一 : 样式冲突遵循就近原则,哪个样式离着结构近,就执行哪个样式
但字体不会被覆盖还是25px
总结二 : 样式不冲突,不会层叠
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
color: red;
font-size: 25px;
}
div {
color: pink;
}
</style>
</head>
<body>
<!-- css 层叠样式表 -->
<div>ZK是狗</div>
</body>
</html>
二 : 继承性
所谓继承性是指书写CSS样式表时,子标签会集成父标签的某些样式,如文本颜色和字号,想要设置一个可继承的属性,只需将它应用于父元素即可.
但是并不是所有都继承,高度,宽度不会继承,只是与文本相关的.
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*p {
color: red;
}*/
.jianlin {
color: pink;
font-size: 50px;
height: 100px;
}
</style>
</head>
<body>
<div class="jianlin">
<p>王思聪</p>
</div>
</body>
</html>
三 : 优先级
CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
| 继承或者* 的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 重要的 | ∞ 无穷大 |
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#ya { /*权重 0,1,0,0*/
color: blue;
}
.yase { /* 类选择器权重 高于 标签选择器 权重 0, 0, 1, 0*/
color: green;
}
div {
/* 权重 0, 0, 0, 1*/
/* 权重 0, 0, 0, 1*/
color: red;
}
div {
/* 权重 0, 0, 0, 1*/
/* 权重 0, 0, 0, 1*/
color: hotpink!important;
}
* { 0 0 0 0
}
/** 0000
div 0001
.one 0010
#two 0100
行内 1000
important ∞*/
</style>
</head>
<body>
<div class="yase" id="ya" style="color: orange">世界杯加油!</div>
</body>
</html>
原则一 : 权重相同 则就近原则
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div { /*0001*/
color: red;
}
div { /*0001*/
color: green;
}
</style>
</head>
<body>
<div>
<p > 世界杯cool </p>
</div>
</body>
</html>
原则二 : 权重会叠加
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div p {/* 0001 + 0001 = 0002*/
color: green;
}
p { /*0001*/
color: red;
}
.feng { /* 0010*/
color: blue;
}
</style>
</head>
<body>
<div>
<p class="feng"> 世界杯Cool </p>
</div>
</body>
</html>
标签权重叠加示例
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
总结 : 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
继承问题
继承的权重为0
优先执行自己的
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: red;
}
div {
color: pink;
}
</style>
</head>
<body>
<div >
<p>继承的问题</p>
</div>
</body>
</html>
下面这种情况还是执行自己的
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father { /* 0010*/
color: green!important;
}
p { /*0001*/
color: red;
}
</style>
</head>
<body>
<div class="father">
<p>继承的问题</p>
</div>
</body>
</html>
