css3学习 之 css选择器(css3 属性选择器)
這是上一篇css選擇器介紹里面內(nèi)容比較詳細(xì)。。大家可以看看 下面我將結(jié)合《HTML 5與css 3權(quán)威指南》這本書 對(duì)css選擇器再進(jìn)行記錄下
里面有些個(gè)人見解如果看客覺得有問題?？梢蕴岢鰜?。。謝謝
先說明下本機(jī)瀏覽器吧：opera 10 firefox 4.0 chrome 由于是公司機(jī)器xp的。。所以ie版本為 ie8 ?另外有一個(gè)ietest
?
在css3中，提倡使用選擇器來將樣式與元素直接綁定起來，這樣的話，在樣式表中什么樣式與元素相匹配變得一目了然，修改起來也很方便。不僅如此，通過選擇器，我們還可以實(shí)現(xiàn)各種復(fù)雜的指定，同時(shí)也能大量減少樣式表的代碼書寫量，最終書寫出來的樣式也會(huì)變得簡(jiǎn)潔明了。?
?
?1：css3 屬性選擇器
?(1)[att*=val]; (2)[att^=val];(3)[att$=val];
1：?[att*=val];解釋：如果元素用att表示的屬性之屬性值中包含用val指定的字符的話，則該元素使用這個(gè)樣式.
?example:
<html>?<head>
<style>
[id*=section]{
????background-color:red;
}
</style>
</head>
<body>
<p?id="sections9999"></p>
</body>
</html>
?
運(yùn)行效果：除了ie其他均能正常顯示。。
?
?2:[att^=val];解釋：如果元素用att表示的屬性之屬性值的開頭為用val指定的字符的話，則該元素使用這個(gè)樣式。(其實(shí)你可以這樣理解在正則里面^匹配開頭嘛所以嘍。。)
??example:
?略；
?運(yùn)行效果：除了ie其他均能正常顯示。。
?
3:[att$=val];解釋：如果元素用att表示的屬性之屬性值的結(jié)尾為用val指定的字符的話，則該元素使用這個(gè)樣式。(在正則里面$匹配結(jié)尾。。)
??example:
?略；
?運(yùn)行效果：除了ie其他均能正常顯示。。?
?
下面再看一個(gè)例子:
??
<html>?<head>
<meta?content="text/html;?charset=UTF-8"?http-equiv="Content-Type">
<style>
a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{
????content:"web網(wǎng)頁";
????color:red;
}
a[href$=jpg]:after{
????content:"JPG圖像素材";
????color:green;
}
</style>
</head>
<body>
<ul>
<li><a?href="http://home.cnblogs.com/blog/">博客</a></li>
<li><a?href="http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html">css選擇器</a></li>
<li><a?href="ss.jpg">圖像素材</a></li>
</ul>
</body>
</html>
??
??運(yùn)行效果：除了ie其他均能正常顯示。。
總結(jié)
以上是生活随笔為你收集整理的css3学习 之 css选择器(css3 属性选择器)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML5的Video标签的属性,方法和
- 下一篇： CSS 伪类与伪元素