CSS特殊問題

我正在爲自己的教育創建一個JavaScript遊戲。遊戲需要幾個頁面，我通過隱藏的div來實現，當你想要查看它們時隱藏/隱藏（offtopic：任何關於這是否是個好主意的建議都是值得歡迎的）。CSS特殊問題

我有一個CSS規則，隱藏所有我的div與display: none;，然後是一個類，取消隱藏與display:block;特定的div。但是，而不是類的隱藏，似乎我選擇所有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選擇器和一個類型選擇器。這比.current_page更具體，這是一個類選擇器本身，因爲只有ID。

除了應用display: block !important;，您可以也應該修改您的上一個選擇器，併爲其指定ID，使其成爲#viewport .current_page。這使ID具有相同的特定性，類選擇器比類型選擇器更具體。

來源

2011-09-12 18:34:20 BoltClock

工程就像一個魅力！ '#viewport div'>'.current_page'因爲id，所以'#viewport div'<'#viewport .current_page'擁有更多的權重，然後我可以使用jquery.removeClass（）/ jquery.addClass（）來操作我的菜單頁面的可見性。 –

嘗試用

#viewport #home_page { 
    display:block; 
}

你需要增加特異性，因爲在CSS規則選擇使用類，ID或嵌套元素以不同的量增加特異性。

這是一個很好的和易於遵循文章關於CSS Specificity。

一般來說，我會說，如果你需要使用!important語句，可能你沒有使用正確的CSS選擇器。我有時候發現自己使用!important聲明只是爲了稍後意識到我可以使用更好的選擇器獲得相同的結果。

來源

2011-09-12 18:34:37

同意。「重要的」感覺就像是在作弊，而我不願意這樣做，因爲很快我可能會有兩個不同的「重要」規則，如果一個項目變得足夠大，就會與彼此衝突。 –

工作的呢？

#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做出更容易。我不會去添加框架只是來完成這個任務，但是如果你正在製作一款遊戲，那麼你將運行更多的圖書館將使你的生活更輕鬆的實例。在這種情況下...在IE中無法使用getElementsByClassName，因此您必須爲IE用戶執行此操作。這是編寫複雜JavaScript的頭痛問題的一個簡單例子，它適用於所有瀏覽器。

來源

2011-09-12 18:40:21

感謝有關跨瀏覽器問題的說明。單靠這一點就會促使我使用一個能夠爲我解決這些問題的圖書館。你是對的，頁面上的內聯樣式勝過CSS特異性的所有內容。 –

回答

相關問題