CSS的魔法工具——CSS選擇器

2013-04-27 分類：網(wǎng)站建設(shè)

作為網(wǎng)站制作前端工程師，通過CSS可以輕而易舉的改變網(wǎng)頁顏色、布局，做出好看的效果等，但是想要實現(xiàn)各種樣式離不開CSS選擇器，它就像是魔法工具，讓我們隨意操作網(wǎng)頁元素的樣式，下邊成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司為大家總結(jié)了一些常用的選擇器。

1、*：通用選擇器

假如我們想讓文檔中的每個元素都顯示成紅色，我們可以這么做：

* {color:red;}

通用選擇器，可以匹配頁面所有的元素。

2、.X：類選擇器

類選擇器的開頭用.（點）進行表示。與ID選擇器的區(qū)別就是可以重用。定義多個元素的樣式，好比按組進行歸類，同一類的樣式統(tǒng)一定義。

.error {

color: red;

}

如果把兩個類串在一起，選擇的就是同時具有兩個類名的元素，類名的順序則無所謂，比如 class="urgent warning" , css 選擇器你也可以這樣寫 .warning .urgent。

3、X Y：后代選擇器

后代選擇器，英文名稱：descendant selector。比如我們要選擇在li元素中包含a標簽的鏈接（不是文檔中所有的鏈接），取消下劃線的默認樣式，我們可以這樣代碼實現(xiàn)：

li a {

text-decoration: none

}

如果你的選擇器看起來像X Y Z A B.error這樣就錯了。問問自己是否真的需要加入這么多負荷, 這樣寫的可讀性也太差了。還有一個需要注意的，后代元素的層級問題，可能會很深。

4、X：元素選擇器

假如你想針對Html預(yù)定義的標簽，比如類似：p,h3,em,a這些標簽，我們可以快速為某類標簽定義樣式。如下段代碼所示：

a { color: red; }

ul { margin-left: 0; }

5、#X：ID選擇器

ID選擇器的開頭使用#號，但是你在使用的時候，需要謹慎。要考慮是否真的需要使用ID選擇器來定義樣式，id選擇器比較局限，不能重用。因此需要慎重考慮。

#container {

width: 960px;

margin: auto;

}

標題名稱：CSS的魔法工具——CSS選擇器
鏈接分享：http://m.2m8n56k.cn/news49/799.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、品牌網(wǎng)站建設(shè)、網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

HTML5時代，將會徹底取代Flash 2013-04-26
年前做好網(wǎng)站推廣，2013年憑實力多金 2013-05-04
Grid實現(xiàn)九宮格布局？N宮格怎么實現(xiàn)？ 2013-05-22
從淘集集破產(chǎn)來看網(wǎng)絡(luò)營銷 2013-05-03
MongoDB和MySQL的區(qū)別，應(yīng)該怎么選擇？ 2013-05-16
丟掉鼠標吧之Eclipse快捷鍵有哪些 2013-05-19
為什么需要https？ 2013-05-03

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

CSS的魔法工具——CSS選擇器