1. 選擇器
CSS選擇器是個(gè)難以置信地強(qiáng)大的工具：它們允許我們在標(biāo)簽中指定特定的HTML元素而不必使用多余的class、ID 或JavaScripts。而且它們中的大部分并不是CSS3中新添加的，而是沒有被得到應(yīng)有的廣泛應(yīng)用。如果你在嘗試實(shí)現(xiàn)一個(gè)干凈的、輕量級的標(biāo)簽以及結(jié)構(gòu)與表現(xiàn)更好的分離，高級選擇器是非常有用的。它們可以減少在標(biāo)簽中的class和ID的數(shù)量并讓設(shè)計(jì)師更方便的維護(hù)樣式表。
屬性選擇器
三個(gè)新的屬性選擇器被添加到CSS3：
[att^="value"]
匹配包含以特定的值開頭的屬性的元素
[att$="value"]
匹配包含以特定的值結(jié)尾的屬性的元素
[att*="value"]
匹配包含含有特定的值的屬性的元素
tweetCC 使用一個(gè)屬性選擇器來指定有title屬性并以字符“tweetCC”結(jié)尾的鏈接: a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}
瀏覽器支持:只有IE6不支持CSS的屬性選擇器。IE7和IE8、Opera、Webkit核心和Gecko核心的瀏覽器都支持。所以在你的樣式中使用屬性選擇器是比較安全的。
連字符
CSS3中唯一新引入的連字符是通用的兄弟選擇器（同級）。它針對一個(gè)元素的有同一個(gè)父級節(jié)點(diǎn)的所有兄弟級別元素。
比如，給某個(gè)特定的div的同級的圖片添加一個(gè)灰色的邊框(div和圖片應(yīng)該有同一個(gè)父級節(jié)點(diǎn))，在樣式表中定義下面的樣式就足夠了： div~img {
border: 1px solid #ccc;
}
瀏覽器支持：所有的主要瀏覽器都支持這個(gè)通用的兄弟選擇器除了我們最愛的IE6！
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 用CSS3將你的設(shè)計(jì)帶入下個(gè)高度 [1] 下一頁 用CSS3將你的設(shè)計(jì)帶入下個(gè)高度 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 用CSS3將你的設(shè)計(jì)帶入下個(gè)高度 [2]
