Con*_*ean 2 html css css-selectors
我正在为我自己的教育创建一个 javascript 游戏。游戏需要几个页面，我通过 hidden 实现这些页面，div当你想查看它们时，这些页面会被隐藏/取消隐藏（题外话：欢迎任何关于这是否是个好主意的建议）。
我有一个 CSS 规则，它隐藏了我所有的 div，display: none;然后是一个用display:block;. 但是，不是取消隐藏类，而是我用于选择所有 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
}
#viewport div是一个 ID 选择器和一个类型选择器。这比.current_page单独的类选择器更具体，因为只有 ID。
display: block !important;您可以并且应该修改最后一个选择器，而不是应用，为其提供 ID 使其变为#viewport .current_page。这使得 ID 同样具体，类选择器比类型选择器更具体。