グループ化されたCSSルールは、セレクタごとに別々のルールを指定するよりも扱いが異なりますか？

以下は、わずかに異なるCSSを持つ2つのほぼ同一のXHTMLドキュメントです。私の理解では、セレクタをグループ化するのは便宜上のものであり、アプリケーションには影響しませんが、これら2つのドキュメントは異なるレンダリングを生成します。私は混乱していますか？セレクタとグループ化されたCSSルールは、セレクタごとに別々のルールを指定するよりも扱いが異なりますか？

最初にグループ化された

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<title>An XHTML 1.0 Strict standard template</title> 
<meta http-equiv="content-type" 
    content="text/html;charset=utf-8" /> 

<style type="text/css"> 
    #container { 
     background-color : #000000; 
     color : #000000; 
    } 
    a, a:link, a:visited, a:hover, a:active { 
     color : #000000; 
    } 
    .link { 
     color : #FFFFFF; 
    } 
</style> 
</head> 

<body> 

<div id="container"> 
<a href="#" class="link">Testing</a><br /><a href="#" class="link">Testing</a> 
</div> 

</body> 
</html>

----- ===== =====対-----
別のセレクタ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<title>An XHTML 1.0 Strict standard template</title> 
<meta http-equiv="content-type" 
    content="text/html;charset=utf-8" /> 

<style type="text/css"> 
    #container { 
     background-color : #000000; 
     color : #000000; 
    } 
    a { 
     color : #000000; 
    } 
    a:visited { 
     color : #000000; 
    } 
    a:hover { 
     color : #000000; 
    } 
    a:active { 
     color : #000000; 
    } 
    .link { 
     color : #FFFFFF; 
    } 
</style> 
</head> 

<body> 

<div id="container"> 
<a href="#" class="link">Testing</a><br /><a href="#" class="link">Testing</a> 
</div> 

</body> 

</html>

出典

2011-12-09 user1090502

何が違うのですか？ – mrtsherman

彼らは同じではありません。最初のブロックには 'a：link'が含まれていますが、2番目のブロックにはこのセレクタが含まれていません。 –

あなたは違いを教えてください？どのブラウザを試しましたか？ –

あなたはそうではありません誤解CSSとあなたが提示した2つの例は事実上同じです。

出典

2011-12-09 21:23:50 bookcasey

あなたは、セレクタ重量の問題をヒットしている - しかし、それはCSSで高い重みを持っている - a:linkがaされているので、あなたの最初の例では、あなたが

a:link, a:hover { 
    color: black; 
} 
a { 
    color: red; 
}

を持っている。これは、<a>は常に黒になります - ちょうど.someClass aがアウトランクaのようになります。

2番目の例では、aの重み付けを超過していないため、a:hoverの規則を下回ると、オーバーライドされます。ここで

は、この概念を理解することについての記事です：http://css-tricks.com/855-specifics-on-css-specificity/

出典

2011-12-09 21:25:22

@Obed - 違いがあります？ – mrtsherman

これは私が見違いです：最初の例.linkで

http://jsfiddle.net/sCKHP/2/

は、第二の例では優先

a:link上を持っています a:linkは、 .link

より優先されます

出典

2011-12-09 21:32:14 mrtsherman

グループ化されたCSSルールは、セレクタごとに別々のルールを指定するよりも扱いが異なりますか？

答えて

関連する問題