亲宝软件园·资讯

展开

CSS(4)---三大特性(继承性,层叠性,优先级)

雨点的名字 人气:1

CSS(4)---三大特性(继承性,层叠性,优先级)

CSS有三大特性分别是: 继承性层叠性优先级

一、继承性

概念 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性。

注意

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>

运行结果

从这个例子中可以看出子标签p继承了父类div的样式。


二、层叠性

概念 层叠性就是CSS处理冲突的一种能力。层叠性只有在多个选择器选中 同一个标签, 然后又设置了相同的属性, 才会发生层叠性。

示例

<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>

在相同优先级的的情况下 下面的样式元素会将上面的层叠掉。


三、CSS优先级

概念 当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定。

优先级

!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 

补充说明

1、继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
2、行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。
3、权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
4、CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

关于CSS权重,有一套计算公式来去计算,用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

部分权重是可以叠加的。比如的例子:

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

注意

对于并集选择器来说不是权重的加和,因为理论上它还是独立的,它只相当于将多个选择器的相同内容归于一个并集选择器中,理论上每一个选择器还是独立的。

示例

<!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>


四、经典测试题

这里举几个测试题来巩固下css优先级的知识。首先我们要知道如何推断标签的最终样式

1. 先找到影响文字的最里面的盒子
2. 然后计算权重
3. 如果权重一样,看层叠性

1、第一题

<!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>

答案 蓝色。

2、第二题

<!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>

答案 蓝色。

3、第三题

<!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>

答案 蓝色。

4、第四题

<!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>

答案 黄色 (如果权重一样,看层叠性)




你如果愿意有所作为,就必须有始有终。(6)


加载全部内容

相关教程
猜你喜欢
用户评论