Div和CSS編寫中對包含選擇器和通配選擇器的使用
包含選擇器
包含選擇器也叫派生選擇器,顧名思義,是一種具有包含關系的選擇。
多個選擇器以空格分開,組合成包含關系,且右邊的選擇器從屬于左邊(即右邊的選擇器只能在左邊的選擇器范圍內選擇)。
一個包含選擇器的應用示例:
- #nav a{
- text-decoration: none;
- }
這個例子表示對“id="nav"”的元素里面的超鏈接<a>應用該樣式(超鏈接取消下劃線),而其他網頁元素的超鏈接不受影響。
包含選擇器是常用的選擇器之一,它讓我們能對一些元素做精確的個性化設定。
選擇器組合
上面講到的包含選擇器,實際可以看著是一種選擇器的組合。顯然,利用選擇器的組合,可以更加精確的將樣式應用到網頁元素,以實現(xiàn)豐富多彩的個性化顯示。
除了這種包含組合之外,我們還可以有如下一些常見的組合:
類型限定類:如div.class ul li{ }
雙重組合類:如div.class ul.catlist { }
偽類:如#nav h2 a:hover
以上這些例子只是為了說明選擇器的組合,在實際應用中可能會有一定差異。善用選擇器組合,可以使我們的CSS文檔更有條理更簡潔。
選擇器分組
選擇器分組表示將有多個有相同樣式定義的選擇器以逗號進行分組。
例子:
- h1,h2,h3,h4,h5,h6,div{
- font-size :14px;
- }
上面就表示將標題h1至h6及div標簽內的字體統(tǒng)一設定為14像素。
注意選擇器分組和包含選擇器的區(qū)別。
通配選擇器
和很多語言一樣,“*”這個符號在CSS里代表所有,即通配選擇器。
例子:
- *{ font-size: 12px; }
這個例子表示將網頁中所有元素的字體定義為12像素,當然這是舉個例子,一般不會做這么極端的定義。
在實際應用中,更多的可能如下:
- *{
- margin: 0;
- padding: 0;
- }
這個定義的含義是將所有元素的外邊距和內邊距定義為0,而在具體需要設定內外邊距的時候,再具體定義。從這個例子可以看出,通配選擇器的作用更多是用于對元素的一種統(tǒng)一預設定。
通配選擇器也可以用于選擇器組合中:
- div *{ color: #FF0000; }
該例子表示在<div>標簽內的所有字體顏色為紅色。
一種例外的情況
- body *{ font-size:120%; }
這時候它表示相乘,當然body也可以換成別的選擇器標簽。由于這種效果取決的因素較多,一般不常使用。
相關文章
- 下面小編就為大家?guī)硪黄绾巫屢粋€div居于頁面正中間【實現(xiàn)方法】。小編覺得挺不錯的,現(xiàn)在分享個大家,也給大家做個參考2016-04-15
- 這篇文章主要介紹了css三種實現(xiàn)div在瀏覽器水平居中的方法,感興趣的小伙伴們可以參考一下2016-04-14
- 下面小編就為大家?guī)硪黄粋€div在瀏覽器水平居中的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。2016-04-14
- 這篇文章主要介紹了div+CSS制作類似微信對話氣泡效果的實例總結,文中總結出了四種編寫方式,并且對三角形的繪制有一個補充說明,需要的朋友可以參考下2016-04-01
- EXCEL表格中的#DIV/0!等符號怎么全部當計算呢?excel表格中出現(xiàn)了很多符號,比如顯示#DIV/0!#N/,在計算的時候會造成很多困擾,該怎么辦呢?今天我們就來將#DIV/0!等符2016-03-27
- 下面小編就為大家?guī)硪黄孌IV水平垂直居中的兩種完美方法推薦。一起跟隨小編過來看看吧。希望給大家一個參考2016-03-15
- 學習DIV+CSS網頁布局中的混合布局,本文為大家分享的是DIV+CSS網頁布局教程的第四篇,感興趣的小伙伴們可以參考一下2016-03-15
- 學習DIV+CSS網頁布局中的三列布局,本文為大家分享的是DIV+CSS網頁布局教程的第三篇,感興趣的小伙伴們可以參考一下2016-03-15
- 學習DIV+CSS網頁布局中的兩列布局,本文為大家分享的是DIV+CSS網頁布局教程的第二篇,感興趣的小伙伴們可以參考一下2016-03-15
- 學習DIV+CSS網頁布局中的一列布局,本文為大家分享的是DIV+CSS網頁布局教程的第一篇,感興趣的小伙伴們可以參考一下2016-03-15

