Question

我正在为自己的教育创建一个javascript游戏。游戏需要几个页面，我通过隐藏的div来实现，当你想要查看它们时会隐藏/取消隐藏（offtopic：关于这个好主意是否受欢迎的任何建议）。

我有一个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
}

Answer 1

#viewport div是ID选择器和类型选择器。这比.current_page更具体，因为它本身就是一个类选择器。

您可以而且应该修改上一个选择器，而不是应用display: block !important;，为其提供ID，使其成为#viewport .current_page。这使得ID同样具体，类选择器比类型选择器更具体。

Answer 2

这有用吗？

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

Answer 3

尝试

#viewport #home_page {
  display:block;
}

您需要提高特异性，因为在CSS规则选择器中使用类，ID或嵌套元素会增加不同数量的特异性。

这是一篇很好且易于理解的关于CSS Specificity的文章。

作为一般规则，我会说如果你需要使用!important语句，可能你没有使用正确的CSS选择器。我有时发现自己使用!important语句只是为了稍后实现，我可以使用更好的选择器获得相同的结果。

Answer 4

ID比类更重要，所以请使用

#viewport div.current_page

Answer 5

除了其他答案中提供的方法之外，您还可以将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 = '';
}

使用mootools或jQuery等javascript库可以更轻松地完成此操作。我不会添加框架只是来实现这一目标，但是如果你正在制作游戏，那么你将会遇到更多的实例，其中一个库会让你的生活变得更轻松。在这种情况下...... getElementsByClassName在IE中不可用，因此您必须为IE用户实现它。这是编写适用于所有浏览器的复杂javascript所涉及的头痛的一个简单例子。

CSS特异性问题

5 个答案: