問題描述

眾所周知在寫 css的時候，會根據html 中類的定義或者 id 的定義來寫相應的 css代碼。給不同的類定義不同的樣式，當然為了能夠少寫一些代碼，大家就會在css 中引用匹配。匹配有模糊匹配和全局匹配。匹配的方式有幾種。當然也可以在 html 中寫不同的類名，或者寫相同的類名，就能夠實現所有的樣式的匹配。但有時候類名不能夠寫到相同，這樣就會出現冗余的代碼，就會造成代碼復雜度的增強。為了減少代碼的冗余，就出現了類的匹配。

解決方案

第 1 種就是利用 div 進行匹配，但這種匹配會給所有的 div 都使用相同的樣式。

// 如果要設置內部所有 div 樣式；則使用 > 標識符

.parent>div{

//style//

}

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

Title

[class^="icon-"]{

width: 100px;

height: 50px;

background-color: red;

}

11112222333344445555

圖 2.1 效果

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

[class*=" icon-"] ，需要注意的是在 icon 前面有一個空格。而且需要將上面的箭頭換為星號，這樣就能夠實現相應類名的全局匹配。

Title

[class*=" icon-"]{

width: 100px;

height: 50px;

background-color: red;

}

1111222233334444555

圖 2.2 效果

這樣就能夠實現，只要類名中含有 Icon 的都可以實現樣式的匹配。但這種匹配，對于開始為 icon 類名的就無法實現相應的效果，所以可以將兩者配合使用。這樣就可以完全的實現匹配效果。

圖 2.3 效果

對于實現上述效果，有兩種方式。第一是兩者的配合使用，第二就是清除 icon 前面的空格。

Title

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

width: 100px;

height: 50px;

background-color: red;

}

1111222233334444555

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

在寫代碼的過程中一定要學會減少代碼的冗余，這樣的程序就能夠更好的運行。

到此這篇關于css中的匹配問題的文章就介紹到這了,更多相關css 匹配內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的css匹配title,解决css中的匹配问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。