CSS 僞類 (Pseudo-classes)實例
CSS 僞類 (Pseudo-classes)實例CSS 僞類用於向某些選擇器添加特殊的效果在支持 CSS 的瀏覽器中，連接的不一樣狀態均可以不一樣的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。a:link {color: #FF0000} /* 未訪問的連接 */a:visited {color: #00FF00} /* 已訪問的連接 */a:hover {color: #FF00FF} /* 鼠標移動到連接上 */a:active {color: #0000FF} /* 選定的連接 */###########僞類W3C："W3C" 列指示出該屬性在哪一個 CSS 版本中定義（CSS1 仍是 CSS2）。屬性 描述 CSS:active 向被激活的元素添加樣式。 1:focus 向擁有鍵盤輸入焦點的元素添加樣式。 2:hover 當鼠標懸浮在元素上方時，向元素添加樣式。 1:link 向未被訪問的連接添加樣式。 1:visited 向已被訪問的連接添加樣式。 1:first-child 向元素的第一個子元素添加樣式。 2:lang 向帶有指定 lang 屬性的元素添加樣式。 2#####################1.超連接本例演示如何向文檔中的超連接添加不一樣的顏色。 <style type="text/css"> a:link {color:#0000FF} a:visited{color:#00FF00} a:hover{color:#FF00FF} a:active{color:#0000FF} </style></head><body><p><b><a href="test1.html" target="_blank">這是一個連接</a></b></p><p><b>註釋：</b>在定義中，a:hover必須位於a:link 和 a:visited 以後，這樣才能生效！</p><p><b>註釋：</b>在Css定義中， a:active 必須位於a:hover 以後，這樣才能生效！</p>2.超連接 2本例演示如何向超連接添加其餘樣式。 <style type="text/css"> a.one:link {color:#ff0000;} a.one:visited{color:#0000ff;} a.one:hover{color:#ffcc00;} a.two:link {color:#ff0000;} a.two:visited{color:#0000ff;} a.two:hover{font-size:150%;} a.three:link {color:#ff0000;} a.three:visited{color:#0000ff;} a.three:hover{background:#66ff66;} a.four:link {color:#ff0000;} a.four:visited{color:#0000ff;} a.four:hover{font-family:monospace} a.five:link {color:#ff0000;text-decoration: none;} a.five:visited{color:#0000ff;text-decoration: none;} a.five:hover{color:#ffcc00;underline;} </style></head><body><p>請把鼠標移動到這些連接上，以查看效果：</p><p><b><a class="one" href="test1.html" target="_blank">這個連接改變顏色</a></b></p><p><b><a class="two" href="test1.html" target="_blank">這個連接改變字體大小</a></b></p><p><b><a class="three" href="test1.html" target="_blank">這個連接改變背景顏色</a></b></p><p><b><a class="four" href="test1.html" target="_blank">這個連接改變字體系列</a></b></p><p><b><a class="five" href="test1.html" target="_blank">這個連接改變文本裝飾</a></b></p></body>3.超連接：:focus 的使用本例演示如何使用 :focus 僞類（沒法在 IE 中工做）。 <style type="text/css"> input:focus{ } </style></head><body><form action="test1.html" method="get"> First name:<input type="text" name="fname" /><br/> Last name:<input type="text" name="lname" /><br/> <input type="submit" value="Submit" /></form><p><b>註釋：</b>若是已規定 !DOCTYPE，那麼 Internet Explorer 8 （以及更高版本）支持 :focus 僞類。</p></body>4.:first-child（首個子對象）本例演示 :first-child 僞類的用法。 <style type="text/css"> p:first-child{font-weight:bold;} li:first-child{text-transform: uppercase;} </style></head><body><div> <p>These are the necessary steps:</p> <ul> <li>Intert key</li> <li>Turn key<strong>clockwise</strong></li> <li>Push accelerator</li> </ul> <p>Do <em>not</em> Push the</p></div>
相關文章
- 1. CSS僞類的實例
- 2. CSS僞類
- 3. CSS :focus 僞類
- 4. css之僞類
- 5. CSS :active 僞類
- 6. css 僞類
- 7. css僞類和僞元素
- 8. CSS——僞類
- 9. CSS僞類和僞元素
- 10. CSS 僞類與僞元素
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • XML 實例 - XML 教程
- • Kotlin學習（二）基本類型
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. CSS僞類的實例
- 2. CSS僞類
- 3. CSS :focus 僞類
- 4. css之僞類
- 5. CSS :active 僞類
- 6. css 僞類
- 7. css僞類和僞元素
- 8. CSS——僞類
- 9. CSS僞類和僞元素
- 10. CSS 僞類與僞元素