2012-04-17 14 views
7

hover,activeおよびfocusは、標準のaタグの設定を自動的に継承していますか?例えばホバー、アクティブ、フォーカス状態は値を継承しますか?

.wrapper .left .main .row .holder .more a, 
#content .wrapper .left .main .row .holder .more a:visited 
{ 
    width: 92px; 
    min-width: 92px; 
    max-width: 92px; 
    height: 23px; 
    min-height: 23px; 
    max-height: 23px; 
    display: block; 
    margin: 0px auto; 
    background: #fff url(../images/more-info-btn.png) top left no-repeat; 
} 

#content .wrapper .left .main .row .holder .more a:hover { 
    width: 92px; 
    min-width: 92px; 
    max-width: 92px; 
    height: 23px; 
    min-height: 23px; 
    max-height: 23px; 
    display: block; 
    margin: 0px auto; 
    background: #fff url(../images/more-info-btn.png) bottom left no-repeat; 
} 

は以下の同じことをしますか?

#content .wrapper .left .main .row .holder .more a, 
#content .wrapper .left .main .row .holder .more a:visited 
{ 
    width: 92px; 
    min-width: 92px; 
    max-width: 92px; 
    height: 23px; 
    min-height: 23px; 
    max-height: 23px; 
    display: block; 
    margin: 0px auto; 
    background: #fff url(../images/more-info-btn.png) top left no-repeat; 
} 

#content .wrapper .left .main .row .holder .more a:hover { 
    background: #fff url(../images/more-info-btn.png) bottom left no-repeat; 
} 
+3

CSSの継承は親要素からスタイルを取得するため、値を正確に「継承」しません。むしろ、値は*カスケード*、または一般的な 'a'ルール(混乱している、私が知っている)から取られます。それでも、あなたは正しい考えを持っています。 – BoltClock

答えて

5

はい、正しい疑似ステートは値を継承します。

矛盾のないように、擬似状態規則で変更しているスタイルのみを宣言することをお勧めします。次のコードで

、テキストは常に:hover状態にかかわらずpadding-top:10pxで、font-size:1.9em次のようになります。

a 
{ 
    color:red; 
    font-size:1.9em; 
    padding-top:10px; 
} 

a:hover 
{ 
    color:green; 
}​ 

-- SEE EXAMPLE --

1

ない、のいずれかの状態でa要素がまだaであるため、要素は、それ自身から継承することはできません。しかし、セレクタとしてaを持つ設定は、その要素がいずれかの状態にあるときにも適用されます。あなたはいくつかのプロパティは、すべての州でaの要素に適用したいとき

したがって、それはaセレクタを使用して設定すればよいです。

技術的には、問題の2つのルールセットは、セレクタの違いにより、特異性に影響します。これが重要な状況はまれであり、適用される他のスタイルシートではかなり特別なルールが必要になります。

関連する問題