CSS命中目標(biāo):子選擇器、相鄰?fù)x擇器與屬性選擇器等_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
在CSS布局網(wǎng)頁開發(fā)中,我們還會用到一常非常有用的選擇器,可以用它來進行整體布局聲明,這就是通用選擇器�?聪旅娴拇a:
這種形式的代碼一般不會多次出現(xiàn),在頁面代碼中出現(xiàn)一次而已,但它的功能是非常強大的,在計算機領(lǐng)域中一般情況下都約定“*”為通配符,它的聲明將會作用于頁面中所有的可用元素,使用它可以定義一些頁面中基本的規(guī)則,如邊距margin、填充padding、字體font-family、文字大小font-size、背景顏色background-color等等。
由于某些瀏覽器不支持或支持的不夠好,下面所介紹的三種選擇器并不是非常的常用,至少目前的情況是這樣的,但隨著時間的推移,某些功能還是非常有用的,我們簡單了解一下子選擇器、相鄰?fù)x擇器與屬性選擇器。
子選擇器
請注重這個選擇器與后代選擇器的區(qū)別,子選擇器(child selector)僅是指它的直接后代,或者你可以理解為作用于子元素的第一個后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇,而子選擇器是通過“>”進行選擇,我們看下面的代碼:
我們將會看到第一個鏈接元素“Div CSS教程”會顯示成藍色,而其它兩個元素會顯示成紅色。當(dāng)然,或許你的瀏覽器并不支持這樣的CSS選擇符。我們在一開始也強調(diào)了不太兼容的現(xiàn)狀。
相鄰?fù)x擇器
我們除了上面的子選擇器與后代選擇器,我們可能還希望找到兄弟兩個當(dāng)中的一個,如一個標(biāo)題h1元素后面緊跟了兩個段落p元素,我們想定位第一個段落p元素,對它應(yīng)用樣式。我們就可以使用相鄰?fù)x擇器。看下面的代碼:
我們將會看到第一個段落“在MB5U.com的Div CSS教程中,介紹了很多關(guān)于CSS網(wǎng)頁布局的知識。”文字顏色將會是藍色。而第二段則不受此CSS樣式的影響。
屬性選擇器
這個選擇器也有點復(fù)雜,在實際應(yīng)用中對于新手來說還很遙遠,它是根據(jù)某個屬性是否存在或?qū)傩缘闹祦碚业侥繕?biāo)元素,是一個非常有意思的功能,假如能做到靈活運用,其效果也會非常強大。關(guān)于這一塊的知識我們以后在MB5U.com的文章中具體說明。
示例代碼 [hl5o.cn]
* {
margin:0;
padding:0;
}
margin:0;
padding:0;
}
這種形式的代碼一般不會多次出現(xiàn),在頁面代碼中出現(xiàn)一次而已,但它的功能是非常強大的,在計算機領(lǐng)域中一般情況下都約定“*”為通配符,它的聲明將會作用于頁面中所有的可用元素,使用它可以定義一些頁面中基本的規(guī)則,如邊距margin、填充padding、字體font-family、文字大小font-size、背景顏色background-color等等。
由于某些瀏覽器不支持或支持的不夠好,下面所介紹的三種選擇器并不是非常的常用,至少目前的情況是這樣的,但隨著時間的推移,某些功能還是非常有用的,我們簡單了解一下子選擇器、相鄰?fù)x擇器與屬性選擇器。
子選擇器
請注重這個選擇器與后代選擇器的區(qū)別,子選擇器(child selector)僅是指它的直接后代,或者你可以理解為作用于子元素的第一個后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇,而子選擇器是通過“>”進行選擇,我們看下面的代碼:
示例代碼 [hl5o.cn]
CSS:
#links a {color:red;}
#links > a {color:blue;}
HTML:
<p id="links">
<a href="http://hl5o.cn/">Div CSS教程</a>>
<a href="http://hl5o.cn/">CSS布局實例</a>
<a href="http://hl5o.cn/">CSS2.0教程</a>
</p>
#links a {color:red;}
#links > a {color:blue;}
HTML:
<p id="links">
<a href="http://hl5o.cn/">Div CSS教程</a>>
<a href="http://hl5o.cn/">CSS布局實例</a>
<a href="http://hl5o.cn/">CSS2.0教程</a>
</p>
我們將會看到第一個鏈接元素“Div CSS教程”會顯示成藍色,而其它兩個元素會顯示成紅色。當(dāng)然,或許你的瀏覽器并不支持這樣的CSS選擇符。我們在一開始也強調(diào)了不太兼容的現(xiàn)狀。
相鄰?fù)x擇器
我們除了上面的子選擇器與后代選擇器,我們可能還希望找到兄弟兩個當(dāng)中的一個,如一個標(biāo)題h1元素后面緊跟了兩個段落p元素,我們想定位第一個段落p元素,對它應(yīng)用樣式。我們就可以使用相鄰?fù)x擇器。看下面的代碼:
示例代碼 [hl5o.cn]
CSS
h1 p {color:blue}
HTML
<h1>MB5U.com是一個非常專業(yè)的CSS站點</h1>
<p>在MB5U.com的Div CSS教程中,介紹了很多關(guān)于CSS網(wǎng)頁布局的知識。</p>
<p>在MB5U.com的CSS布局實例中,有很多與CSS布局有關(guān)的案例。</p>
h1 p {color:blue}
HTML
<h1>MB5U.com是一個非常專業(yè)的CSS站點</h1>
<p>在MB5U.com的Div CSS教程中,介紹了很多關(guān)于CSS網(wǎng)頁布局的知識。</p>
<p>在MB5U.com的CSS布局實例中,有很多與CSS布局有關(guān)的案例。</p>
我們將會看到第一個段落“在MB5U.com的Div CSS教程中,介紹了很多關(guān)于CSS網(wǎng)頁布局的知識。”文字顏色將會是藍色。而第二段則不受此CSS樣式的影響。
屬性選擇器
這個選擇器也有點復(fù)雜,在實際應(yīng)用中對于新手來說還很遙遠,它是根據(jù)某個屬性是否存在或?qū)傩缘闹祦碚业侥繕?biāo)元素,是一個非常有意思的功能,假如能做到靈活運用,其效果也會非常強大。關(guān)于這一塊的知識我們以后在MB5U.com的文章中具體說明。
相關(guān)CSS教程:
- 相關(guān)鏈接:
- 教程說明:
CSS教程-CSS命中目標(biāo):子選擇器、相鄰?fù)x擇器與屬性選擇器等
。