日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索
分享

多個(gè)css類(lèi)選擇器使用規(guī)則

 一本正經(jīng)地胡鬧 2019-05-13

類(lèi)選擇器在style中的寫(xiě)法：    .類(lèi)選擇器名字   注意前面有個(gè)點(diǎn)

在body中的寫(xiě)法：     class="類(lèi)選擇器名字"

通常為了減少代碼量，使代碼更簡(jiǎn)潔，機(jī)智的程序員們會(huì)選擇調(diào)用已有的符合條件的樣式，而若一個(gè)標(biāo)簽需要多個(gè)樣式，或存在包含關(guān)系，則要考慮用多個(gè)類(lèi)選擇器。請(qǐng)看下面的幾種情況：

一、 一個(gè)標(biāo)簽使用多個(gè)類(lèi)選擇器

<style type="text/css">
       .a{
           background:pink;
           font-size:20px;
       }
       .b{
           background:green;
       }
</style>
</head>
<body>
    <div class='a'>這是類(lèi)選擇器為a的div標(biāo)簽</div>
    <div class='b'>這是類(lèi)選擇器為b的div標(biāo)簽</div>

    <div class='a b'>這是類(lèi)選擇器同時(shí)采用a和b的div標(biāo)簽</div>

</body>

運(yùn)行結(jié)果如下圖所示：

class為同時(shí)采用a和b的標(biāo)簽，顏色為后面的顏色綠色，如果兩個(gè)選擇器有相同的屬性值， 則以最后一個(gè)屬性值為準(zhǔn)。字體大小為a中設(shè)定的值。

然而ID選擇器則不能像類(lèi)選擇器一樣一起使用，把class改為id，代碼如下：

<head>
<style type="text/css">
       #a{
           background:pink;
           font-size:20px;
       }
       #b{
           background:green;
       }
</style>
</head>
<body>
    <div id='a'>這是id選擇器為a的div標(biāo)簽</div>
    <div id='b'>這是id選擇器為b的div標(biāo)簽</div>
    <div id='a b'>這是id選擇器同時(shí)采用a和b的div標(biāo)簽</div>

</body>

運(yùn)行結(jié)果如下圖：


同時(shí)采用a和b標(biāo)簽，則沒(méi)有效果，說(shuō)明在id選擇器中，不能像類(lèi)選擇器一樣同時(shí)使用

二、兩類(lèi)選擇器之間有無(wú)空格

<head>
<style type="text/css">
       
       .a.b{
           font-size: 20px;
         }
       .a .b{
           background:pink;
         }
</style>
</head>
<body>
    <div class='a b'>這是類(lèi)選擇器同時(shí)采用a和b的div標(biāo)簽</div>
    <div class='a'>這是類(lèi)選擇器為a的div標(biāo)簽
        <div class='b'>這是類(lèi)選擇器為a下類(lèi)為b的div標(biāo)簽</div>    
    </div>
</body>


運(yùn)行結(jié)果如下：


（1）.a.b中間沒(méi)有空格，代表同時(shí)包含a 和 b樣式。 而第一個(gè)div標(biāo)簽正是采用了兩者，表現(xiàn)出來(lái)為字體變化。

（2）.a .b中間有空格，代表a包含b。 而class 為a的div標(biāo)簽正好包含class為b的標(biāo)簽， 被包含的標(biāo)簽背景顏色為粉色。

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類(lèi)似文章 更多