css匹配title,解决css中的匹配问题
問題描述
眾所周知在寫 css的時候，會根據(jù)html 中類的定義或者 id 的定義來寫相應(yīng)的 css代碼。給不同的類定義不同的樣式，當然為了能夠少寫一些代碼，大家就會在css 中引用匹配。匹配有模糊匹配和全局匹配。匹配的方式有幾種。當然也可以在 html 中寫不同的類名，或者寫相同的類名，就能夠?qū)崿F(xiàn)所有的樣式的匹配。但有時候類名不能夠?qū)懙较嗤?#xff0c;這樣就會出現(xiàn)冗余的代碼，就會造成代碼復雜度的增強。為了減少代碼的冗余，就出現(xiàn)了類的匹配。
解決方案
第 1 種就是利用 div 進行匹配，但這種匹配會給所有的 div 都使用相同的樣式。
// 如果要設(shè)置內(nèi)部所有 div 樣式；則使用 > 標識符
.parent>div{
//style//
}
第 2 種是利用 class 定義的類進行匹配。這種匹配就相對精確，也有兩種匹配方式。第 1 種匹配方式是利用箭頭符號進行匹配。例如： [class^="icon-"]
Title[class^="icon-"]{
width: 100px;
height: 50px;
background-color: red;
}
11112222333344445555圖 2.1 效果
但這種匹配方式需要類名前面為 icon- 的才可以。如果類名前面還有其他的命名，就不能夠發(fā)揮相應(yīng)的效果。因此就可以使用另一種匹配方式。也就是類名中的全局匹配。例如：
[class*=" icon-"] ，需要注意的是在 icon 前面有一個空格。而且需要將上面的箭頭換為星號，這樣就能夠?qū)崿F(xiàn)相應(yīng)類名的全局匹配。
Title[class*=" icon-"]{
width: 100px;
height: 50px;
background-color: red;
}
1111222233334444555圖 2.2 效果
這樣就能夠?qū)崿F(xiàn)，只要類名中含有 Icon 的都可以實現(xiàn)樣式的匹配。但這種匹配，對于開始為 icon 類名的就無法實現(xiàn)相應(yīng)的效果，所以可以將兩者配合使用。這樣就可以完全的實現(xiàn)匹配效果。
圖 2.3 效果
對于實現(xiàn)上述效果，有兩種方式。第一是兩者的配合使用，第二就是清除 icon 前面的空格。
Title[class^="icon-"],[class*=" icon-"]{
width: 100px;
height: 50px;
background-color: red;
}
1111222233334444555這樣就能夠減少代碼的冗余了。
在寫代碼的過程中一定要學會減少代碼的冗余，這樣的程序就能夠更好的運行。
到此這篇關(guān)于css中的匹配問題的文章就介紹到這了,更多相關(guān)css 匹配內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
總結(jié)
以上是生活随笔為你收集整理的css匹配title,解决css中的匹配问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机二级题目小汽车大客车,浙江省计算机
- 下一篇： 微信广告服务器地址,【微信广告服务商平台