我正在为我自己的教育创建一个 javascript 游戏。该游戏需要几个页面，我通过隐藏的 div 实现这些页面，当您想要查看它们时，这些页面会隐藏/取消隐藏(题外话:欢迎任何关于这是否是个好主意的建议)。
我有一个 CSS 规则，它使用 display:none; 隐藏我的所有 div，然后是一个使用 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
}
最佳答案
#viewport div 是一个 ID 选择器和一个类型选择器。这比 .current_page 本身更具体，因为只有 ID。
除了应用 display: block !important;，您可以而且应该修改最后一个选择器，为其提供 ID，使其成为 #viewport .current_page。这使得 ID 同样具体，类选择器比类型选择器更具体。
关于html - CSS 特异性问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7392253/