CSS命中目標(biāo)：子選擇器、相鄰?fù)x擇器與屬性選擇器等_CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

在CSS布局網(wǎng)頁(yè)開發(fā)中，我們還會(huì)用到一常非常有用的選擇器，可以用它來進(jìn)行整體布局聲明，這就是通用選擇器�？聪旅娴拇a：

示例代碼 [www.hl5o.cn]

* {
margin:0;
padding:0;
}

　　這種形式的代碼一般不會(huì)多次出現(xiàn)，在頁(yè)面代碼中出現(xiàn)一次而已，但它的功能是非常強(qiáng)大的，在計(jì)算機(jī)領(lǐng)域中一般情況下都約定“*”為通配符，它的聲明將會(huì)作用于頁(yè)面中所有的可用元素，使用它可以定義一些頁(yè)面中基本的規(guī)則，如邊距margin、填充padding、字體font-family、文字大小font-size、背景顏色background-color等等。

　　由于某些瀏覽器不支持或支持的不夠好，下面所介紹的三種選擇器并不是非常的常用，至少目前的情況是這樣的，但隨著時(shí)間的推移，某些功能還是非常有用的，我們簡(jiǎn)單了解一下子選擇器、相鄰?fù)x擇器與屬性選擇器。

子選擇器

　　請(qǐng)注重這個(gè)選擇器與后代選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一個(gè)后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇，而子選擇器是通過“>”進(jìn)行選擇，我們看下面的代碼：

示例代碼 [www.hl5o.cn]

CSS：
#links a {color:red;}
#links > a {color:blue;}
HTML：
<p id="links">
<a href="http://www.hl5o.cn/">Div CSS教程</a>>
<a href="http://www.hl5o.cn/">CSS布局實(shí)例</a>
<a href="http://www.hl5o.cn/">CSS2.0教程</a>
</p>

　　我們將會(huì)看到第一個(gè)鏈接元素“Div CSS教程”會(huì)顯示成藍(lán)色，而其它兩個(gè)元素會(huì)顯示成紅色。當(dāng)然，或許你的瀏覽器并不支持這樣的CSS選擇符。我們?cè)谝婚_始也強(qiáng)調(diào)了不太兼容的現(xiàn)狀。

相鄰?fù)x擇器

　　我們除了上面的子選擇器與后代選擇器，我們可能還希望找到兄弟兩個(gè)當(dāng)中的一個(gè)，如一個(gè)標(biāo)題h1元素后面緊跟了兩個(gè)段落p元素，我們想定位第一個(gè)段落p元素，對(duì)它應(yīng)用樣式。我們就可以使用相鄰?fù)x擇器�？聪旅娴拇a：

示例代碼 [www.hl5o.cn]

CSS
h1 p {color:blue}
HTML
<h1>MB5U.com是一個(gè)非常專業(yè)的CSS站點(diǎn)</h1>
<p>在MB5U.com的Div CSS教程中，介紹了很多關(guān)于CSS網(wǎng)頁(yè)布局的知識(shí)。</p>
<p>在MB5U.com的CSS布局實(shí)例中，有很多與CSS布局有關(guān)的案例。</p>

　　我們將會(huì)看到第一個(gè)段落“在MB5U.com的Div CSS教程中，介紹了很多關(guān)于CSS網(wǎng)頁(yè)布局的知識(shí)。”文字顏色將會(huì)是藍(lán)色。而第二段則不受此CSS樣式的影響。

屬性選擇器

　　這個(gè)選擇器也有點(diǎn)復(fù)雜，在實(shí)際應(yīng)用中對(duì)于新手來說還很遙遠(yuǎn)，它是根據(jù)某個(gè)屬性是否存在或?qū)傩缘闹祦碚业侥繕?biāo)元素，是一個(gè)非常有意思的功能，假如能做到靈活運(yùn)用，其效果也會(huì)非常強(qiáng)大。關(guān)于這一塊的知識(shí)我們以后在MB5U.com的文章中具體說明。