css--多重样式

1.一个DIV中既有class又有id

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #box1{color:red;}
            .box1{color:blue;}
            .box2{color:blue;}
            #box2{color:red;}
        </style>
    </head>
    <body>
        <div  class="box1" id="box1">
            Hello
        </div>
        
        <div  class="box2" id="box2">
            Word
        </div>
        <!--说明id作用力大于class，且与位置无关-->
    </body>
</html>

 

 

2.一个div中有多个class

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .red {color:red;}
            .blue{color:blue;}
        </style>
    </head>
    <body>
        <div  class="red blue" >
            Hello
        </div>
    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .blue{color:blue;}
            .red {color:red;}
        </style>
    </head>
    <body>
        <div  class="red blue" >
            Hello
        </div>
    </body>
    <!--结果是：第一个是蓝色，第二个是红色。
    说明：有两个类，会按照div引用的class中，在css中最后一个定义为准-->
</html>

 

 3.伪类选择器与class

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            /*下边执行顺序不影响结果*/
            .red {color:red;}
            .red>div:first-child{color:pink;}/*作用域第1*/
            .red>div{color:blue;}/*作用域第2*/
            .green {color:green;}/*作用域第3*/
        </style>
    </head>
    <body>
        <div  class="red" >
            <div class="green">
                Hello<!--颜色为pink-->
            </div>
        </div>
    </body>
</html>

 

 

 

总结一下：作用力排名

第一名：ID

第二名：伪类选择器（里边还有比较）

第三名：class（多个class，以css定义最后那个为准）

posted @ 2016-04-17 16:57  丁少华  阅读(1036)  评论(0)  编辑  收藏  举报