Html学习之七（CSS选择器的使用--基础选择器优先级问题）

二、基础选择器的综合使用

　　优先级顺序：id选择器>class选择器>元素选择器。也就是说，如果这三种选择器同时为某一个元素设定样式，那么冲突的部分按优先级的顺序依次决定。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css基础选择器</title>
        <style>
            #header{
                font: "微软雅黑";
                font-size: 16px;
                width: 600px;
            }
            .one{
                background-color: plum;
                height: 400px;
            }
            .two{
                background-color: bisque;
                height: 200px;
            }
            p strong{font-style: italic;}
        </style>
    </head>
    <body>
        <div id="header" class="one">
            <p>div1里的文字</p>
        </div>
        <div id="header" class="two">
            <p>div2里的<strong>文字</strong></p>
        </div>
    </body>
</html>

结果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css的权重</title>
        <style>
            p strong{color: black;}
            strong.blue{color: green;}
            .father{color: yellow;}
            p.father strong{color: orange;}
            #header strong{color: pink;}
            #header strong.blue{color: red;}
        </style>
    </head>
    <body>
        <p  class="father" id="header">
            <strong class="blue"> guess my color</strong>    
        </p>
    </body>
</html>

结果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css权重的继承</title>
        <style>
            strong{color: blue;}
            #header{color: red;}
        </style>
    </head>
    <body>
        <p id="header">
            <strong>guess my color</strong>
        </p>
    </body>
</html>

结果：

Html学习之七（CSS选择器的使用--基础选择器优先级问题）

猜你喜欢