在HTML中,通過各種各樣的屬性可以給元素增加很多附加的信息。例如,通過id屬性可以將不同div元素進行區(qū)分。
在CSS2中引入了一些屬性選擇器,而CSS3在CSS2的基礎(chǔ)上對屬性選擇器進行了擴展,新增了3個屬性選擇器,使得屬性選擇器有了通配符的概念,這三個屬性選擇器與CSS2的屬性選擇器共同構(gòu)成了CSS功能強大的屬性選擇器。如下表所示:
(單擊可放大)
實例展示:
html代碼:
<a href="xxx.pdf">我鏈接的是PDF文件</a> <a href="#" class="icon">我類名是icon</a> <a href="#" title="我的title是more">我的title是more</a>
css代碼
a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }
結(jié)果顯示:
請你在右邊輸入css3代碼改變?nèi)墟溄拥谋尘邦伾谝恍袨榧t色,第二行為綠色,第三行為藍色。
實現(xiàn)效果:
要求:用三條css樣式實現(xiàn)。(大腦開動起來吧?。?/p>
好吧!如果實現(xiàn)想不出來就打開“不會了怎么辦”吧。
對CSS3新增的屬性選擇器要深入掌握呀!請你再詳細看下內(nèi)容有關(guān)的詳細講解吧,相信這對你很輕松的!
參考代碼如下:
a[class^="column"]{background:red;} a[href$="doc"]{background:green;} a[title*="box"]{background:blue;}
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報