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