CSSの特異性の問題

私自身の教育のためのjavascriptゲームの作成に取り組んでいます。ゲームはいくつかのページを必要とします。私はそれを表示したいときに隠されている/隠されている隠されたdivを実装しています（offtopic：良いアイデアかどうかについてのアドバイス）。CSSの特異性の問題

すべてのdivをdisplay: none;で非表示にしてから、特定のdivをdisplay:block;で非表示にするCSSルールがあります。しかし、クラスの非表示の代わりに、それはすべてのdivを選択するための私のCSSのセレクタが適用されないルールの結果、クラスをオーバーライドしているようだ。私はちょうどこれを修正するために!importantプロパティを使用することができます知っているが、私は何を書いたが動作しない理由を理解したい。私はクラスが十分に特定のセレクターになると思っていました。ルールは隠れルールの後に来ることさえあります。

<!DOCTYPE HTML> 
<html> 
<head> 
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"> 
</head> 
<body> 
    <div id="game"> 
     <div id="content"> 
      <div id="viewport"> 
       <div id="home_page" class="current_page">Home</div> 
       <div id="work_page">Work</div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

とCSS：

#content 
{ 
    background: #eef; 
    padding: 5px; 
} 

#viewport div 
{ 
    display:none; 
} 

.current_page 
{ 
    display:block; 
    //display:block !important; //One solution, but not preferred 
}

出典

2011-09-12 Conrad.Dean

#viewport divはIDセレクタとタイプセレクタである

は、ここに私のソースです。これは、IDだけのために、クラスセレクタである.current_pageよりも具体的です。

display: block !important;を適用する代わりに、最後のセレクタを変更してIDを与えて、#viewport .current_pageにすることができます。これにより、クラスセレクタは型セレクタよりも具体的であるため、IDは等しく特定されます。

出典

2011-09-12 18:34:20 BoltClock

魅力的な作品です！ '#viewport div'> idのために' .current_page'です。 '#viewport div' <' #viewport .current_page'はより多くの重みを保持し、jquery.removeClass（）/ jquery.addClass（）を使って操作することができます私のメニューページの可視性。 –

は、CSSルールのセレクターのクラス、IDまたはネストされた要素の使用は、異なる量によって特異性を高めるためにあなたは、特異性を増大する必要が

#viewport #home_page { 
    display:block; 
}

で試してみてください。

ここには、CSS Specificityについての記事があります。

一般的なルールとして、!importantステートメントを使用する必要がある場合は、おそらく正しいCSSセレクタを使用していないと言います。私はいつか!importantのステートメントを使って、より良いセレクタを使って同じ結果を得ることができたことを後で知ることができました。

出典

2011-09-12 18:34:37

合意。 '！important'は不正行為のように感じるので、プロジェクトが巨大になると、かなり早く2つの'重要な 'ルールが互いに衝突する可能性があるので、私はそれをやめています。 –

これは機能しますか？

#viewport div.current_page 
{ 
    display:block; 
    /* display:block !important; //One solution, but not preferred */ 
}

出典

2011-09-12 18:35:43 BNL

これは動作します！ありがとうございました！ '#viewport .current_page'と同じように簡潔であることがわかります。 –

IDのクラスよりもより多くの重量を運ぶので、他の回答に提供された方法に加えて

#viewport div.current_page

出典

2011-09-12 18:36:04 ThatMatthew

を使用し、あなたもdisplay:noneスタイルをインラインで配置することができます。ほとんどのjavascriptライブラリにはshow()/hide()メソッドがあります。これらのメソッドは通常、それぞれdisplay CSSプロパティをblockまたはnoneに変更します。これは最も保守が容易な方法のようですが、CSSカスケードや特異性を考慮する必要はありません。インラインスタイルは他のものよりも優先されます。

 <div id="viewport"> 
      <div id="home_page" class="viewportPage">Home</div> 
      <div id="work_page" class="viewportPage" style="display:none;">Work</div> 
     </div>

はjavascript：

function handlePageShow (page_element_to_show) { 
    // hide all pages 
    var pages = document.getElementsByClassName('viewportPage'); 
    var page_count = pages.length; 
    for (var i = 0; x < page_count; i++) { 
    pages[i].style.display = 'none'; 
    } 
    // now show the target page 
    page_element_to_show.styles.display = ''; 
}

これはJavaScriptライブラリのようなmootoolsやjQueryを使用していても容易になります。私はフレームワークを追加しないでくださいこれを達成するためにちょうどがありますが、あなたがゲームを作っているのであれば、ライブラリがあなたの人生をより楽にしてくれるような複数のインスタンスを実行します。この場合、... getElementsByClassNameはIEでは利用できませんので、IEユーザーのためにその実装を補助する必要があります。これは、すべてのブラウザで動作する複雑なjavascriptの作成に関わる頭痛の一例です。

出典

2011-09-12 18:40:21

ブラウザー間の問題に関するおかげで、ありがとうございました。それだけで私のためにそれらの問題を処理するライブラリを使用するように私をプッシュします。そうです、ページ上のインライン・スタイリングは、CSSの特異性がある限り、すべてを上回ります。 –

答えて

関連する問題