css样式中a:visited a:active 能帮我解释一下这是什么意思吗？ 在CSS中#wrap #header #navigation...
\u8bf7\u95ee\u8fd9\u6bb5css\u4ee3\u7801\u91cc\u7684A /A:link /A:visited /A:active /A:hover\u90fd\u662f\u4ec0\u4e48\u610f\u601d\uff1f\u600e\u4e48\u4e00\u4e2a\u8282\u65e5\u8fc7\u7684\u628a\u767e\u5ea6\u8fc7\u7a77\u4e86\u3001\uff1f\uff1f\u56de\u7b54\u95ee\u9898\u7684\u4eba\u5c11\u4e86\u3002
a:link\u662f\u8fde\u63a5
\u540e\u9762\u7684\u4e3a\u6d3b\u52a8\u8fde\u63a5
\u8fde\u63a5\u8bbf\u95ee
\u548c\u8bbf\u95ee\u8fc7\u7684\uff0c\u5f53\u7528\u5230\u8fd9\u6761\u65f6\uff0c\u4f60\u53ef\u76f4\u63a5\u8c03\u7528style\u91cc\u7684\u8fd9\u4e2a\u8fde\u63a5\u5c5e\u6027\uff1a\u6bd4\u5982
.shopu{
A:link
A:visited
A:active
A:hover}
\u4f60\u53ea\u9700\u8981\u5728\u8fde\u63a5\u5b57\u7684font
\u5c5e\u6027\u91cc\u52a0\u4e0a\u8fd9\u6837\u4e00\u53e5\u5c31\u884c\u4e86\uff1a
\u9996\u9875
\u5c31\u53ef\u4ee5\u5b9e\u73b0\u4f60\u5b9a\u7684\u8fde\u63a5\u6837\u8bd5\u4e86\u5176\u5b83\u7684\u8fd8\u591a\uff0c\u5982\u679c\u4f60\u60f3\u5b66\uff0c\u770b\u770b\u4e66\uff0c\u548c\u7528dw\u505a\u4e00\u4e2a\uff0c\u5f88\u5feb\u7684\u3002\u7ed9\u4f60\u4e00\u4e2a\u4f8b\u5b57\uff1a
body,td,th
{
font-size:
12px;
}
a
{
font-size:
12px;
}
a:link
{
text-decoration:
none;
}
a:visited
{
text-decoration:
none;
}
a:hover
{
text-decoration:
none;
}
a:active
{
text-decoration:
none;
}
.STYLE1
{color:
#003366}
body
{
margin-left:
0px;
margin-top:
1px;
margin-right:
0px;
margin-bottom:
0px;
}
\u6211\u7684\u4f8b\u5b57
\u8fd9\u6837\u5c31\u6709\u6548\u679c\u4e86
\u4ed6\u4eec\u662fCSS\u4e2d\u4e0d\u540c\u7684\u9009\u62e9\u5668\uff01
1\u3001#wrap{ ... ... }\u8868\u793aID\u9009\u62e9\u5668\uff08\u552f\u4e00\u9009\u62e9\uff09id \u9009\u62e9\u5668\u4ee5 "#" \u6765\u5b9a\u4e49\u3002
\u4e0b\u9762\u662fid\u9009\u62e9\u5668\u5b9e\u4f8b
#red {color:red;} #green {color:green;} \u8fd9\u4e2a\u6bb5\u843d\u662f\u7ea2\u8272\u3002 \u8fd9\u4e2a\u6bb5\u843d\u662f\u7eff\u8272\u3002
2\u3001.active \u8868\u793aClass\u9009\u62e9\u5668\uff08\u7c7b\u9009\u62e9\u5668\uff09\u5728 CSS \u4e2d\uff0c\u7c7b\u9009\u62e9\u5668\u4ee5\u4e00\u4e2a\u70b9\u53f7\u663e\u793a\u3002
\u7c7b\u9009\u62e9\u5668\u5b9e\u4f8b
.red {color:red;} \u8fd9\u4e2a\u6bb5\u843d\u662f\u7ea2\u8272\u3002 \u8fd9\u4e2a\u6bb5\u843d\u4e5f\u662f\u7ea2\u8272\u3002
a:visited{ ... ... } \u8868\u793a\u4f2a\u7c7b\u9009\u62e9\u5668\uff0c\u5728\u652f\u6301 CSS \u7684\u6d4f\u89c8\u5668\u4e2d\uff0c\u94fe\u63a5\u7684\u4e0d\u540c\u72b6\u6001\u90fd\u53ef\u4ee5\u4e0d\u540c\u7684\u65b9\u5f0f\u663e\u793a\uff0c\u8fd9\u4e9b\u72b6\u6001\u5305\u62ec\uff1a\u6d3b\u52a8\u72b6\u6001\uff0c\u5df2\u88ab\u8bbf\u95ee\u72b6\u6001\uff0c\u672a\u88ab\u8bbf\u95ee\u72b6\u6001\uff0c\u548c\u9f20\u6807\u60ac\u505c\u72b6\u6001\u3002
\u4f2a\u7c7b\u9009\u62e9\u5668\u5b9e\u4f8b\uff1a
a:link {color: #FF0000}/* \u672a\u8bbf\u95ee\u7684\u94fe\u63a5 */ a:visited {color: #00FF00}/* \u5df2\u8bbf\u95ee\u7684\u94fe\u63a5 */ a:hover {color: #FF00FF}/* \u9f20\u6807\u79fb\u52a8\u5230\u94fe\u63a5\u4e0a */ a:active {color: #0000FF}/* \u9009\u5b9a\u7684\u94fe\u63a5 */ \u767e\u5ea6\u77e5\u9053
XXX { ... ... } \u8868\u793a\u5143\u7d20\u9009\u62e9\u5668\uff0c\u6700\u5e38\u89c1\u7684 CSS \u9009\u62e9\u5668\u662f\u5143\u7d20\u9009\u62e9\u5668\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u6587\u6863\u7684\u5143\u7d20\u5c31\u662f\u6700\u57fa\u672c\u7684\u9009\u62e9\u5668\u3002\u5982\u679c\u8bbe\u7f6e HTML \u7684\u6837\u5f0f\uff0c\u9009\u62e9\u5668\u901a\u5e38\u5c06\u662f\u67d0\u4e2a HTML \u5143\u7d20\uff0c\u6bd4\u5982 p\u3001h1\u3001em\u3001a\uff0c\u751a\u81f3\u53ef\u4ee5\u662f html \u672c\u8eab
\u5143\u7d20\u9009\u62e9\u5668\u5b9e\u4f8b\uff1a
h1{color:red} h2{color:green} \u767e\u5ea6\u77e5\u9053 \u767e\u5ea6\u77e5\u9053
1.所有链接
首先，伪类：link和a元素选择器（来源于链接标记的<a href ...>部分）组合，创建选择器a:link。
a :link {
color:#f00;
}
这个简单的选择器将处理所有<a>元素的实例，将所有未访问过的的链接变为红色。由于没有创建 相应的选择起来覆盖浏览器默认访问过的链接样式，所有访问过的链接也仍然是红色。
2.访问过的链接
为了区别显示访问过的链接，只需要结合<a>元素和：visited伪类创建一个简单的选择器即可。
a :visited {
color:#999;
}
现在所有未访问过的链接是红色，而所有访问过的链接将变成淡灰色（如图7-2所示）。让访问过的链接和没有访问过的链接有所不同的是非常重要的。这是一个大家都接受的惯例，并且可以立即突出在本机上已经访问过的所有连接。
3.:hover伪类
假定有一个很大的连接列表，或者有一个到处都是链接的段落，如果没有某种形式的交互，用户很容易就会点错链接，从而被带到错误的目的网页。强大的:hover伪类可以解决这个问题，该伪类除了能够提高可用性外，也是非常吸引人的。
同样，这个选择器首先找到所有<a>元素的实例，但是仅仅当用户鼠标移动到链接文本时，才真正执行。
a:hover ｛
color：#333;
｝
这个简单的规则在鼠标放在链接上时将所有的链接文本变成深灰色，而不管该链接是否已经访问过。
4.:active伪类
:active伪类主要关注鼠标真正点击链接时的样式。该伪类可以提高网页的可用性。
a:active {
color:#333;
}
在这个例子中，当用户点击链接时，只要当前页面一直保持浏览，文本将变成黑色，这样主要是提供一个额外的提示，以表明用户目前正在处理那个网页。
另外要非常注意的是这几个伪类在声明时的顺序：如果你在同一个选择器上使用几种不同的伪类，声明时一定要注意他们之间的先后顺序，记住，一定是L V H A（字母为各个伪类的首字母），这个顺序非常重要。
例如，如果你将a:hover选择器放在a:visited选择器之上（也就是说你的顺序是L H V A），由于层叠作用，你会发现a:hover声明对于所有访问过的链接没有任何影响。即使鼠标停留在连接上，文本仍然保持淡灰色，而不会发生预期的动作。或许有某些情况需要这种方法，但是这种场合应该很少，因此，最好是要避免。
a:visited 访问后的样式，鼠标点击这个链接之后的样子（其中包括颜色、字体大小之类的）
a:active 是点击时候的一个样式 ，鼠标放在这个连接上的样子（同样包裹字体的颜色，打字大小一系列的样式）
希望能够帮到你^V^
a:visited 是代表访问后的一个样式
a:active 是点击时候的一个样式
绛旓細a锛歭ink灏辨槸閾炬帴骞冲父鐨勭姸鎬侊紝a锛歷isited灏辨槸閾炬帴琚闂繃鐨勭姸鎬侊紝a鍜宎锛歭ink鐨勫尯鍒垜灏变妇涓緥瀛愬惂锛css鏍峰紡锛歛{ color锛歳ed} a锛歭ink{ color:blue;}閭ｄ箞浠ヤ笅 鏍囩鍐呯殑鍏冪礌棰滆壊鏄剧ず濡備笅锛<a>red</a> <a herf="#">bule</a> 瀹為檯涓婏紝澶у鏁版儏鍐垫垜浠洿鎺ョ敤a鑰屼笉鏄痑:link锛屼竴鑸儏鍐典笅鏈缁堟晥鏋...
绛旓細2. 鍦ㄢCSS鏍峰紡鈥濋潰鏉夸腑锛岀偣鍑诲彸涓嬭鐨勨滄柊寤 CSS 瑙勫垯鈥濇寜閽紝鎵撳紑鈥滄柊寤 CSS 瑙勫垯鈥濆璇濇锛屽涓嬪浘鎵绀猴細鍦ㄢ滈夋嫨鍣ㄧ被鍨嬧濅腑閫夋嫨鈥滃鍚堝唴瀹(鍩轰簬閫夋嫨鐨勫唴瀹)鈥濋」銆傚湪鈥滈夋嫨鍣ㄥ悕绉扳濅腑鐐瑰嚮鍙宠竟鐨勪笅鎷夌澶达紝鎴戜滑鍙互鐪嬪埌锛歛:link锛氭湭璁块棶鐨勮秴閾炬帴銆a:visited锛氬凡缁忚闂繃鐨勮秴閾炬帴銆俛:hover锛氶紶鏍...
绛旓細瀹氫箟閾炬帴鍦ㄩ紶鏍囪婵娲伙紙鐐逛笅鍘伙級鏃跺欑殑鏍峰紡銆傛搷浣滄柟娉曞涓嬶細1銆佹柊寤轰竴涓猦tml鏂囦欢锛屽懡鍚嶄负test.html锛宎鏍囩鍥涗釜涓嶅悓鐨勪吉绫伙紝鏈変笉鍚岀殑鏁堟灉銆2銆佸埄鐢╝鏍囩浼被鏀瑰彉瀛椾綋鐨勯鑹层備笅闈唬鐮佸疄鐜颁簡a鏍囩鐨勯粯璁ら鑹蹭负绾㈣壊锛岀偣鍑婚摼鎺ヨ繃鍚庯紝棰滆壊鍙樹负缁胯壊锛屽綋榧犳爣鏀惧湪杩炴帴涓婃樉绀虹矇绾㈣壊銆3銆佸埄鐢╝鏍囩浼被鏀瑰彉瀛椾綋鐨...
绛旓細鑷畾涔夊悕绉:visited {color: #000000; text-decoration: none;} a 鑷畾涔夊悕绉:hover {color: #0000FF; text-decoration: underline;} a 鑷畾涔夊悕绉:active {color: #000000; text-decoration: none;} 杩欑鏄湪鍚屼竴涓〉闈㈣鏌愪釜杩炴帴鏄剧ず鍑哄彟澶栫殑棰滆壊鏍峰紡 A:link 鏄湁杩炴帴鐨勬枃瀛楃殑棰滆壊A:visited ...
绛旓細a:visited鏄綔鐢ㄤ簬閾炬帴琚偣鍑讳箣鍚庯紝浣犳妸瀹冪悊瑙ｆ垚搴旇鍦ㄤ粈涔堢姸鎬佷笅鍙戠敓浜嗭紵浣犺创鍑虹殑浠ヤ笂浠ｇ爜瀹屽叏娌￠棶棰橈紝鐐逛竴涓摼鎺ヤ箣鍚庯紝杩欎釜閾炬帴鐨勮儗鏅壊鎸css瀹氫箟鏄剧ず涓洪粍鑹层
绛旓細CSS涓閫氳繃鍥涗釜浼被鏉ュ畾涔夐摼鎺ョ殑鏍峰紡锛屽垎鍒槸锛歛:link 閾炬帴榛樿鐨鏍峰紡a:visited 閾炬帴宸茶璁块棶杩囨椂鐨勬牱寮廰:hover 榧犳爣鎮诞鍦ㄩ摼鎺ヤ笂鐨勬牱寮廰:active 鐐瑰嚮閾炬帴鏃跺欑殑鏍峰紡 涓鑸畾涔夎繖鍥涚鏍峰紡鐨勬槸鈥淟VHA鈥濈殑椤哄簭鏉ュ啓鏍峰紡锛屼笉鐒跺彲鑳藉嚭鐜版牱寮忚鐩栭棶棰橈紱瀹氫箟class鏍峰紡涓鑸垎涓ょ,涓绉嶅湪a鏍囩涓婏紝涓绉...
绛旓細鎬庝箞涓涓妭鏃ヨ繃鐨勬妸鐧惧害杩囩┓浜嗐侊紵锛熷洖绛旈棶棰樼殑浜哄皯浜嗐俛:link鏄繛鎺 鍚庨潰鐨勪负娲诲姩杩炴帴 杩炴帴璁块棶 鍜岃闂繃鐨勶紝褰撶敤鍒拌繖鏉℃椂锛屼綘鍙洿鎺ヨ皟鐢╯tyle閲鐨勮繖涓繛鎺ュ睘鎬э細姣斿 .shopu{ A:link A:visited A:active A:hover} 浣犲彧闇瑕佸湪杩炴帴瀛楃殑font 灞炴ч噷鍔犱笂杩欐牱涓鍙ュ氨琛屼簡锛<font calss="shopu">...
绛旓細鍙槸琛ㄧず褰撳墠鐘舵佽鏍峰紡鏈璋冨彇锛:visited 鏄夋嫨鍣ㄧ敤浜庨夊彇宸茶璁块棶鐨勯摼鎺ワ紝灏辨槸涔嬪墠鐨勯摼鎺ュ湴鍧宸茬粡琚偣鍑昏闂繃浜嗭紝閭ｄ箞杩欎釜鏍峰紡鎵嶄細琚皟鍙栨垨鑰呮樉绀哄嚭鏁堟灉鏉ワ紝娌＄偣鍑诲氨涓嶄細璋冨彇 鍏跺疄浣犵粰瀛椾綋鎴栬呰儗鏅洿鎺ュ姞涓涓猺ed绾㈣壊鍐嶈繘琛屾搷浣滀竴娆★紝杩欐牱灏变細鏈夋洿鐩磋鐨勪綋鐜 ...
绛旓細CSS鏍峰紡涓瓒呴摼鎺ヤ笉鍚岀姸鎬佷笅鐨勬牱寮忓畾涔夊涓嬶細a:link{} /* 鏈闂殑閾炬帴 */a:visited{} /* 宸茶闂殑閾炬帴 */a:hover{} /* 褰撴湁榧犳爣鎮仠鍦ㄩ摼鎺ヤ笂 */a:active{} /* 琚夋嫨鐨勯摼鎺 */鍥犳锛屽鏋滄兂瑕佹槸璁块棶杩囩殑閾炬帴鍜屾湭璁块棶杩囩殑閾炬帴鐨勬枃瀛楁牱寮忕浉鍚岋紝閭ｅ氨淇濇寔a:link{}鍜宎:visited...
绛旓細鍒嗙被: 鐢佃剳/缃戠粶 >> 绋嬪簭璁捐 >> 鍏朵粬缂栫▼璇█ 闂鎻忚堪:琛ㄦ牸id鍛藉悕涓"nav",濡傛灉鎴戣寤虹珛涓涓css鏍峰紡,缂栬緫鍣ㄦ槸dw,閫夋嫨楂樼骇(ID,涓婁笅鏂囬夋嫨鍣ㄧ瓑),鍦ㄦ爣绛惧濉啓"#nav a:link,#nav a:visited"鐨勯珮绾ss鏍峰紡.鍦ㄨ繖閲屾湁鐨勫湴鏂逛笉鏄庣櫧,"#nav a:link,#nav a:visited"鏄惁涓娆″畾涔変袱涓珮绾ф牱寮忕殑鍛?
