CSS (4) --- three characteristics (inheritance, laminating properties priorities)
CSS has three characteristics 继承性are: 层叠性, 优先级, .
First, inheritance
概念 Set some properties to the parent element, child elements can also be used, we call this inheritance.
note
1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
3.继承性中的特殊性
3.1 a标签的文字颜色和下划线是不能继承的
3.2 h标签的文字大小是不能继承的示例
<!-- 样式部分 -->
<style type="text/css">
.father {
width: 300px; /*设置宽度*/
font-size: 20px; /* 设置字体*/
text-align: right; /* 字体右对齐*/
background-color: green; /*背景颜色绿色*/
color:red; /*字体颜色红色*/
}
</style>
<!-- html部分 -->
<body>
<div class="father">father标签
<p>father子标签 p</p>
</div>
</body>operation result
From this example it can be seen in the sub-class inherited from a parent tag p div style.
Second, the laminate of
概念CSS is a kind of layered capability of dealing with conflict. Only in stacking of multiple selectors select 同一个标签, and then set up 相同的属性, laminating properties will occur.
示例
<html>
<head>
<title>CSS三大特性之层叠性</title>
<style>
p {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<p style="color: black">我是段落</p> <!-- 最终显示black 就近原则 black > blue > red -->
</body>
</html>Style elements will be stacked below upper off under the same priority case.
Three, CSS priority
概念 When a plurality of selectors select the same label, and sets the same label to the same attribute, it is determined by how laminate priority.
优先级
!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 补充说明
1、继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
2、行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。
3、权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
4、CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。CSS-weight formula set come calculated using a four-digit numeric string (the CSS2 is three) to indicate more like four levels, from left to right value, the maximum left, a greater than one, no decimal between digits, insurmountable between levels.
Partial weight can be superimposed. For example example:
div ul li ------> 0,0,0,3
a:hover -----—> 0,0,1,1
.son ul li ------> 0,0,1,2
.son a ------> 0,0,1,1
#son p ------> 0,1,0,1注意
And the selector is set for the weights are not additive, since it is theoretically independent, it is only equivalent to the same content a plurality of selectors and attributed to a set of selectors, each selector is theoretically independent .
示例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div,p {
color: green; /*这里不能是0,0,0,2 而是两个0,0,0,1*/
}
p {
color: red; /*对于p标签最终会显示红色 0,0,0,1 (因为和上面优先级一样，所以下面会覆盖上面样式)*/
}
</style>
</head>
<body>
<p>标签什么颜色</p>
</body>
</html>Fourth, the classic test questions
Here are some test questions to consolidate under css priority knowledge. First of all we need to know how to infer the ultimate style tags
1. 先找到影响文字的最里面的盒子
2. 然后计算权重
3. 如果权重一样，看层叠性1, the first question
<!DOCTYPE>
<html>
<head>
<title>第2题</title>
<style type="text/css">
#father{
color:red; /* 继承的权重为 0,0,0,0 */
}
p{
color:blue; /* 权重 0,0,0,1 */
}
</style>
</head>
<body>
<div id="father">
<p>试问这行字体是什么颜色的？</p>
</div>
</body>
</html>答案 blue.
2, the second question
<!DOCTYPE>
<html>
<head>
<title>第1题</title>
<style type="text/css">
#father #son{ /*权重: 0,2,0,0 */
color:blue;
}
#father p.c2{ /* 权重: 0,1,1,1 */
color:black;
}
div.c1 p.c2{ /* 权重 0,0,2,2 */
color:red;
}
#father{
color:green !important; /* 继承的权重为 0,0,0,0 */
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
</html>答案 blue.
3. The third question
<!DOCTYPE>
<html>
<head>
<title>Document</title>
<style type="text/css">
div div div div div div div div div div div div{ /* 权重 0,0,0,11 (最后一位数再怎么相加都不会向前进一位) */
color:red;
}
.me{
color:blue; /* 权重 0,0,1,0 */
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">试问这行文字是什么颜色的</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>答案 blue.
4, the fourth question
<!DOCTYPE>
<html>
<head>
<title>第四题</title>
<style type="text/css">
.c1 .c2 div{ /* 权重 0,0,2,1 */
color: blue;
}
div #box3{ /* 权重 0,1,0,1 */
color:green;
}
#box1 div{ /* 权重 0,1,0,1 */
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字显示什么颜色
</div>
</div>
</div>
</body>
</html>答案 Yellow (If the weights are the same, see laminating properties)
你如果愿意有所作为，就必须有始有终。(6)