久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

搜索
分享

【原】網(wǎng)頁|css中的匹配問題

 算法與編程之美 2020-08-08

問題描述

眾所周知在寫css的時(shí)候,，會(huì)根據(jù)html中類的定義或者id的定義來寫相應(yīng)的css代碼,。給不同的類定義不同的樣式,，當(dāng)然為了能夠少寫一些代碼,，大家就會(huì)在css中引用匹配,。匹配有模糊匹配和全局匹配。匹配的方式有幾種,。當(dāng)然也可以在html中寫不同的類名,，或者寫相同的類名，就能夠?qū)崿F(xiàn)所有的樣式的匹配,。但有時(shí)候類名不能夠?qū)懙较嗤?，這樣就會(huì)出現(xiàn)冗余的代碼，就會(huì)造成代碼復(fù)雜度的增強(qiáng),。為了減少代碼的冗余,，就出現(xiàn)了類的匹配。

解決方案

第1種就是利用div進(jìn)行匹配,，但這種匹配會(huì)給所有的div都使用相同的樣式,。

<div>

     <div  id='div1'/>

    <div  id='div2'/>    

</div>

//如果要設(shè)置內(nèi)部所有div樣式；則使用 > 標(biāo)識(shí)符

.parent>div{

       //style//

}

第2種是利用class定義的類進(jìn)行匹配,。這種匹配就相對(duì)精確,，也有兩種匹配方式。第1種匹配方式是利用箭頭符號(hào)進(jìn)行匹配,。例如：[class^="icon-"]

<!DOCTYPE html>

<html>

<head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         [class^="icon-"]{

            width: 100px;

            height: 50px;

            background-color: red;

         }

     </style>

</head>

<body>

<div>1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

<div>5555</div>

</body>

</html>

圖2.1 效果

但這種匹配方式需要類名前面為icon-的才可以,。如果類名前面還有其他的命名，就不能夠發(fā)揮相應(yīng)的效果,。因此就可以使用另一種匹配方式,。也就是類名中的全局匹配。例如：

[class*=" icon-"],，需要注意的是在icon前面有一個(gè)空格,。而且需要將上面的箭頭換為星號(hào)，這樣就能夠?qū)崿F(xiàn)相應(yīng)類名的全局匹配,。

<!DOCTYPE html>

<html>

<head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         [class*=" icon-"]{

            width: 100px;

            height: 50px;

            background-color: red;

         }

     </style>

</head>

<body>

<div>1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

<div class="text-success  icon-t">555</div>

</body>

</html>

圖2.2 效果

這樣就能夠?qū)崿F(xiàn),，只要類名中含有Icon的都可以實(shí)現(xiàn)樣式的匹配。但這種匹配,，對(duì)于開始為icon類名的就無法實(shí)現(xiàn)相應(yīng)的效果,，所以可以將兩者配合使用。這樣就可以完全的實(shí)現(xiàn)匹配效果,。

圖2.3 效果

對(duì)于實(shí)現(xiàn)上述效果,，有兩種方式,。第一是兩者的配合使用，第二就是清除icon前面的空格,。

<!DOCTYPE html>

<html>

<head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         [class^="icon-"],[class*=" icon-"]{

            width: 100px;

            height: 50px;

             background-color: red;

         }

     </style>

</head>

<body>

<div>1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

<div class="text-success  icon-test">555</div>

</body>

</html>

這樣就能夠減少代碼的冗余了,。

在寫代碼的過程中一定要學(xué)會(huì)減少代碼的冗余，這樣的程序就能夠更好的運(yùn)行,。



END

編  輯   |   王楠嵐

責(zé)  編   |   桂   軍

 where2go 團(tuán)隊(duì)

微信號(hào)：算法與編程之美          

    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

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

    類似文章 更多