一、前綴屬性選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>屬性選擇器的使用（前綴）</title> <style type="text/css"> p[id^=one]{ font-family: "微軟雅黑"; font-size: 16px; color: red; text-indent: 2em; } </style> </head> <body> <p id="one"> 為了看日出，我常常早起。那時天還沒有大亮，周圍非常清靜，船上只有機器的響聲。 </p> <p id="two"> 天空還是一片淺藍，顏色很淺。轉眼間天邊出現了一道紅霞，慢慢地在擴大它的范圍，加強它的亮光。我知道太陽要從天邊升起來了，便轉眼地望着那里。 </p> <p id="one1"> 果然過了一會兒，在那個地方出現了太陽的小半邊臉，紅是真紅，卻沒有亮光。這個太陽好象負着重荷似地一步一步、慢慢地努力上升，了最后，終於沖破了雲霞，完全跳出了海面，顏色紅得非常可愛。一剎那間，這個深紅的圓東西，忽然發出了奪目的亮光，射得人眼睛發，它旁邊的雲片也突然有了光彩。 </p> <p id="two1"> 有時太陽走進了雲堆中，它的光線卻從雲里射下來，直射到水面上。這時候要分辨出哪里是水，哪里是天，倒也不容易，因為我就只看見片燦爛的亮光。 </p> </body> </html>
結果：
二、后綴屬性選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>屬性選擇器的使用(后綴)</title> <style type="text/css"> p[id$=main]{ font-family: "微軟雅黑"; font-size: 16px; color: red; } </style> </head> <body> <p id="old1"> 盼望着，盼望着，東風來了，春天的腳步近了。 </p> <p id="old2"> 小草偷偷地從土里鑽出來，嫩嫩的，綠綠的。園子里，田野里，瞧去，一大片一大片滿是的。坐着，躺着，打兩個滾，踢幾腳球，賽幾趟，捉幾回迷藏。風輕悄悄的，草綿軟軟的。 </p> <p id="oldmain"> 桃樹、杏樹、梨樹，你不讓我，我不讓你，都開滿了花趕趟兒。紅的像火，粉的像霞，白的像雪。花里帶着甜味，閉了眼，樹上仿佛已經是桃兒、杏兒、梨兒！花下成千成百的蜜蜂嗡嗡地鬧着…… </p> <p id="newmain"> “吹面不寒楊柳風”，不錯的，像母親的手撫摸着你。風里帶來些新翻的泥土的氣息，混着青草味，還有各種花的香，都在微微潤濕的空氣醞釀。鳥兒將窠巢安在繁花嫩葉當中，高興起來了…… </p> </body> </html>
結果：
三、包含屬性選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>屬性選擇器的使用(包含)</title> <style type="text/css"> p[id*=demo]{ font-family: "微軟雅黑"; font-size: 16px; color: red; } </style> </head> <body> <p id="demo1"> 我們消受得秦淮河上的燈影，當四月猶皎的仲夏之夜。 </p> <p id="main1"> 在茶店里吃了一盤豆腐干絲，兩個燒餅之后，以至歪的腳步踅上夫子廟前停泊着的畫訪，就懶洋洋到躺到藤椅上去了。好郁蒸的江南，傍也還是熱的。"快開船罷！"槳聲響了。 </p> <p id="newdemo"> 小的燈舫初次在河中盪漾；於我，情景是頗朦朧，滋味是怪羞澀的。我要錯認它作七里的山塘；可是，河房里明窗洞啟，映着玲瓏入畫的欄干，頓然省得身在何處了…… </p> <p id="olddemo"> 又早是夕陽西下，河上妝成一抹胭脂的薄媚。是被青溪的姊妹們所薰染的嗎？還是勻得她們臉上的殘脂呢？寂寂的河水，隨雙槳打它，終沒言語。密匝匝的綉恨逐老去的年華，已都如蜜餳似的融在流波的心窩里、連嗚咽也將嫌它多事，更哪里論到哀嘶…… </p> </body> </html>
結果：
