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