前端面试 CSS三大特性

CSS的三大特性

1.层叠性

　　代码由上向下执行，相同选择器设置到同一元素上，样式冲突的，会执行比较靠近html的样式，样式不冲突的情况下不影响

　　代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box {
                margin: 0 auto;
                height: 200px;
                width: 200px;
                background-color: black;
            }
            .box1 {
                background-color: red;
                width: 100px;
                height: 100px;
                }
            .box1 {
                background-color: pink;
                }
        </style>
        <div id="box">
            <div class="box1">11</div>
        </div>
        
    </body>
</html>

2.继承性

　　CSS具有继承父类元素的特性，如 字体大小，颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box {
                margin: 0 auto;
                height: 200px;
                font-size: 30px;
            }
            .box1 {
                
                width: 100px;
                height: 100px;
                }
        </style>
        <div id="box">
            <div class="box1">继承性</div>
        </div>
        
    </body>
</html>

3.优先级

  • 继承样式的权重为0 ， 
  • 行内样式，style属性的元素，行内样式权限非常高
  • !important命令，拥有最大的优先级

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

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box {
                margin: 0 auto;
                height: 200px;
                font-size: 30px;
                color: #ffbbff !important;
            }
            .box1 {
                width: 100px;
                height: 100px;
                color: red;
                }
        </style>
        <div id="box">
            <div class="box1">优先级</div>
        </div>
        
    </body>
</html>

 

posted @ 2021-05-18 16:56  一杯咖啡钱  阅读(63)  评论(0)    收藏  举报