上一篇: 【網頁建設與制作】屬性選擇符

【單位網站建設】 /+定義不匹配簡單選擇符的樣式,紅色文字4/
<!..匹配簡單選擇符s的元素E-->
<!..不匹配簡單選擇符s的元素E-->
E:target:[att]
{
/*CSS代碼*/
}
其中,E表示網頁元素,target表示相關URL指向的元素E, att表示元素的屬性。示例
如下:
div#content-primary:target {background-color:#ffD; font-weight:bold;line-height:24px)
p{ height:50px;)
應用此樣式的代碼如下:
div id=”nav-primary”>#nav-primary</div>
<div id="content-primary ">#content-primary</div><1--匹配URL指向的元素E-->
<div id="content-secondary">#content-secondary</div>
<div id="tertiary-content">#tertiary-content</div>
<div id="nav-secondary">#nav-secondary</div>
<p>提示:在地址欄后面輸入#content-secondary,可以看到#content-primary的div出現黃色背景</
瀏覽器中的瀏覽效果如圖6-15所示。
囊麟褊鬯幽幽豳鲞囊豳齲黼黼黼翩燃刪黼嘲蝴■嘲繃麟麟麟麟㈣溺俐
鬻§一一,霪扯一*m ttu”t x麟;l;溺itl≤蠢瀵溺≤幽麟蓊§戮黌遴鬣≤麟遴,;;鍪ti篡l鎏:邈I
。.~ 0誰*.冉ijjrfIj.,,l。t山。tt,n,t.“dB舟一目標曲婁lt掣ptI盤撮蔣ht-1h。n‘嚶t—pr…r 奔l
~ 崎 誓∞
#nav-primary 灞
mnte辯,rl-^黼 .Ⅻ
#囂焉囂漂’ 綢
#nawsccondary潮I
。疊I
提示,在地址欄后面輸^#content-secondary,可看#ii#content-primary的div出現黃色背景 l
圖6-14 E:not(s)選擇符 圖6-15 E:target選擇符
c9)Ln元素狀態(tài)偽類選擇符
UI (UserInterface)就是用戶界面,這里主要介紹UI元素狀態(tài)偽類選擇符。
●E:hover用來指定鼠標指針移動到元素上面時元素使用的樣式。
●E:active用來指定激活被指定元素(在元素上按下鼠標還沒有松手)時使用的樣式。
●E:focus用來指定元素獲取光標焦點時使用的樣式。