简单了解学习CSS的伪类(特别是hover,actived)
類
:在HTML中當(dāng)表現(xiàn)class屬性的時(shí)候,人們可以用點(diǎn)(.)號(hào)來作為~=號(hào)的一個(gè)替代選擇,所以
div.value等同于div[class~=value]。此時(shí).value只能嚴(yán)格的應(yīng)用于HTML中的class屬性,所以此類選擇符叫類選擇
符。在CSS中樣式通常依附與一個(gè)元素在文檔樹中的位置,這個(gè)簡(jiǎn)單的模型對(duì)于許多情況來說是足夠的,但是一些常見的版式狀態(tài)不能應(yīng)用于文檔樹的結(jié)構(gòu)。例
如,在HTML中,沒有元素能夠引用一個(gè)段落的第一行,所以也沒有簡(jiǎn)單的CSS選擇符應(yīng)用它。所以,CSS引進(jìn)了偽類(pseudo-class)和偽元
素(pseudo-element)來允許基于文檔樹意外信息的格式化。
第一種
:selector:pseudo-class {property: value} 也可以用HTML的class屬性來設(shè)定偽類。
例句:
| a:link {color:red} |
第二種
:selector.class:pseudo-class {property: value} 偽類是最常用的偽類。
例句:
| a.c1:link {color:red} |
錨(a)偽類
CSS很多的建議并沒有得到瀏覽器的支持,但有四個(gè)可以安全使用的用在連接上的偽類。錨(a)偽類是最常用的偽類。例句如下:
| a:link {color: #FF0000} /* 未被訪問的鏈接 紅色 */ a:visited {color: #00FF00} /* 已被訪問過的鏈接 綠色 */ a:hover {color: #FFCC00} /* 鼠標(biāo)懸浮在上的鏈接 橙色 */ a:active {color: #0000FF} /* 鼠標(biāo)點(diǎn)中激活鏈接 藍(lán)色 */ |
也可以用HTML的class屬性來設(shè)定偽類。例句如下:
| a.c1:link {color: #FF0000} /* 未被訪問的鏈接 紅色 */ a.c1:visited {color: #00FF00} /* 已被訪問過的鏈接 綠色 */ a.c1:hover {color: #FFCC00} /* 鼠標(biāo)懸浮在上的鏈接 橙色 */ a.c1:active {color: #0000FF} /* 鼠標(biāo)點(diǎn)中激活鏈接 藍(lán)色 */ |
例句:actived的順序書寫。
注:由于CSS優(yōu)先級(jí)的關(guān)系(后面比前面的優(yōu)先級(jí)高),在寫a的CSS時(shí),一定要按照a:link, a:visited, a:hover, a:actived的順序書寫
。
注意
盡管CSS給予你繞開的控制權(quán),用不同的顏色表示已經(jīng)訪問過的連接是一個(gè)很好的習(xí)慣,因?yàn)楹芏嘤脩暨€是這樣預(yù)期的。偽類(除了hover)不常用,恐怕也沒有過去常用。因此,它沒有過去那樣有用了。但如果你能收集常用用戶的意見,你會(huì)發(fā)現(xiàn)應(yīng)該使用它。
傳統(tǒng)上,連接文本是藍(lán)色的,已訪問的連接是紫色的。也許,這是最有效、最有用的顏色。然而,伴隨著CSS的廣泛發(fā)展,這種顏色不會(huì)是平常的了,用戶也不再假設(shè)連接必須是藍(lán)色或紫色的。
還應(yīng)注意
你應(yīng)該也可以在除了連接的其他元素上使用hover偽類
。不幸的是,Internet Explore并不支持。這真是一個(gè)極大的煩惱,因?yàn)樵谄渌鼮g覽器上可以有很多小技巧讓你的頁面看起來更令人愉快。
總結(jié)
以上是生活随笔為你收集整理的简单了解学习CSS的伪类(特别是hover,actived)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: drools规则语法
- 下一篇: 电子书mobi的格式详解