樣式表CSS中定義鏈結 A 的「愛恨原則」

2021-09-30 06:30:07 字數 1018 閱讀 2952

樣式表css中定義鏈結 a 的順序,可能會對大家有一些幫助:

a:link

a:visited

a:hover

a:active

a :link、a:hover、a:visited這幾個元素,定義css時候的順序不同,也會直接導致鏈結顯示的效果不同。

我想,原因就在於瀏覽器解釋css時遵循的「就近原則」。

舉例來說:

我想讓未訪問鏈結顏色為藍色,活動鏈結為綠色,已訪問鏈結為紅色:

第一種情況:我定義的順序是a:visited、a:hover、a:link,這時會發現:把滑鼠放到未訪問過的藍色鏈結上時,它並不變成綠色,只有放在已訪問的紅色鏈結上,鏈結才會變綠。

第二種情況:我把css定義順序調整為:a:link、a:visited、a:hover,這時,無論你滑鼠經過的鏈結有沒有被訪問過,它都會變成綠色啦。

這是因為,乙個滑鼠經過的未訪問鏈結同時擁有a:link、a:hover兩種屬性,在第一種情況下,a:link離它最近,所以它優先滿足a:link,而放棄a:hover的重複定義。

在第二種情況,無論鏈結有沒有被訪問過,它首先要檢查是否符合a:hover的標準(即是否有滑鼠經過它),滿足,則變成綠色,不滿足,則繼續向上查詢,一直找到滿足條件的定義為止。

一句話:在css中,如果對於相同元素有針對不同條件的定義,宜將最一般的條件放在最上面,並依次向下,保證最下面的是最特殊的條件。

這樣,瀏覽器在顯示元素時,才會從特殊到一般、逐級向上驗證條件,才會使你的每乙個css語句都起到效果。

當然,如果故意打亂順序,也會造成一些特殊的效果。比如,可以為鏈結製造出下劃線顏色與文字顏色的差異。

老外總結了乙個便於記憶的「愛恨原則」(love/hate),即四種偽類的首字母:lvha。

再重複一遍正確的順序:a:link、a:visited、a:hover、a:active.

CSS層疊樣式表 定義樣式表

定義樣式表 1 html標記定義 p p可以叫做選擇器,定義那個標記中的內容執行其中的樣式 乙個選擇器可以控制若干個樣式屬性,他們之間需要用英語 隔開,最後乙個可以不應加 2 class定義 class定義是以 開始 p3 id 定義 id定義是 開始的 p4 優先順序問題 id class htm...

Css樣式表中 margin paddi

css樣式表中 margin padding和border 相淋 樣式表的精髓 margin和padding和border 一 padding 我們可以把加過樣式表的html標記看成是乙個盒子。對這個盒子中的內容控制,用到的樣式 padding 它又分為 padding left padding r...

CSS樣式表定義標籤li前面樣式

定義li前面的小點樣式 view plaincopy to cyhbgoj kilipboardprint?語法 list style type disc circle square dyhbgoj kiecimal upper romanyhbgoj ki lower alpha upyhbgoj...