6.18日音訊,CSS派生選擇器用法詳解。是通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式,你可以使標記更加簡潔。派生選擇器可以使一個元素里的子元素定義樣式例如:lia{font-size:14px}就是給li下的子元素a定義一個14px號像素的字體樣式類別選擇器在html中引入css樣式通常由,類別選擇器在CSS中用一個“.”點開頭表示如:.box{width:960px;margin:0auto;padding:0px;overflow:hidden}
在html頁面中,用class="類別名"的方法調(diào)用:<divclass="box">這里是內(nèi)容</div>類別選擇器方法比較簡單靈活,可以隨時根據(jù)頁面的需求新建和刪除還有,id選擇器在CSS中用“#”號開頭表示如:#box{width:960px;margin:0auto;padding:0px;overflow:hidden}在html頁面中,用id="類別名"的方法調(diào)用:<divid="box">這里是內(nèi)容</div>id選擇器和類別選擇器其實是一樣的通常id選擇器僅是用來表示不重復的樣式相對的來說,類別選擇器靈活一些,而id選擇器僅表示重要的樣式字段
在CSS1中,通過這種方式來應用規(guī)則的選擇器被稱為上下文選擇器(contextualselectors),這是由于他們依賴于上下文關(guān)系來應用或者避免某項規(guī)則。在CSS2中,它們稱為派生選擇器,但是無論你如何稱呼它們,它們的作用都是相同的。
派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個標簽的樣式。通過合理地使用派生選擇器,我們可以使HTML代碼變得更加整潔。
比方說,你希望列表中的strong元素變?yōu)樾斌w字,而不是通常的粗體字,可以這樣定義一個派生選擇器:
listrong{
font-style:italic;
font-weight:normal;
}
請注意標記為<strong>的藍色代碼的上下文關(guān)系:
<p><strong>我是粗體字,不是斜體字,因為我不在列表當中,所以這個規(guī)則對我不起作用</strong></p>
<ol>
<li><strong>我是斜體字。這是因為strong元素位于li元素內(nèi)。</strong></li>
<li>我是正常的字體。</li>
</ol>
在上面的例子中,只有l(wèi)i元素中的strong元素的樣式為斜體字,無需為strong元素定義特別的class或id,代碼更加簡潔。
再看看下面的CSS規(guī)則:
strong{
color:red;
}
h2{
color:red;
}
h2strong{
color:blue;
}
下面是它施加影響的HTML:
<p>網(wǎng)站建設(shè)<strong>制作</strong>.</p>
<h2>網(wǎng)頁制作</h2>
<h2>網(wǎng)站的顏色是<strong>blue</strong>.</h2>
而我們最常用的是元素選擇器、類選擇器、ID選擇器、后代選擇器、群組選擇器,同時大家可以在實際應用中把這些選擇器結(jié)合起來使用,達到目的就行了。那么關(guān)于CSS3選擇器的第一部分——基本選擇器就介紹到這里,有點簡單,希望對接觸CSS的前端開發(fā)者有所幫助。