CSS特异性问题

发布于 2024-12-04 03:03:19 字数 1149 浏览 1 评论 0原文

我正在为我自己的教育创建一个 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
}

原文

I'm working on creating a javascript game for my own education. The game requires several pages, which I'm implementing through hidden divs that get hidden/unhidden when you want to view them (offtopic: Any advice about whether or not that's a good idea is welcome).

I have a CSS rule that hides all of my divs with display: none; and then a class that unhides a specific div with display:block;. However, instead of the class unhiding, it seems that my css selector for selecting all the divs is overriding the class, resulting in the rule not applying. I know I can just use the !important property to fix this, but I want to understand why what I've written doesn't work. I thought that a class would be a specific enough selector, and the rule even comes after the hiding rules.

Here's my source:

<!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>

and css:

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

#viewport div
{
    display:none;
}

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瑾兮 2024-12-11 03:03:19

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

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

回复收藏 0 原文

辞取 2024-12-11 03:03:19

这有效吗？

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

Does this work?

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

回复收藏 0 原文

夏至、离别 2024-12-11 03:03:19

尝试使用

#viewport #home_page {
  display:block;
}

您需要增加特异性，因为在 CSS 规则选择器中使用类、ID 或嵌套元素会不同程度地增加特异性。

这是一篇关于 CSS 特异性的精彩且易于理解的文章。

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

Try with

#viewport #home_page {
  display:block;
}

You need to increase specificity, because the use of classes, IDs or nested elements in the CSS rules selector increase specificity by different amounts.

Here is a nice and easy to follow article about CSS Specificity.

As a general rule, I would say that if you need to use the !important statement, probably you didn't use the right CSS selector. I sometime found myself using the !important statement just to realize later on that I could obtain the same result using a better selector.

回复收藏 0 原文

盗梦空间 2024-12-11 03:03:19

ID 比类更重要，所以使用

#viewport div.current_page

IDs carry more weight than classes, so use

#viewport div.current_page

回复收藏 0 原文

佞臣 2024-12-11 03:03:19

除了其他答案中提供的方法之外，您还可以将 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 所涉及的令人头疼的一个小例子。

In addition to the methods provided in other answers, you can also place the display:none style inline. Most javascript libraries have a show()/hide() methods - these methods typically change the display CSS property to block or none, respectively. This seems to be the most easy-to-maintain method, and then you don't even have to consider CSS cascades or specificity at all - inline styles trump everything else.

        <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 = '';
}

This is made even easier using a javascript library such as mootools or jQuery. I wouldn't go add the framework just to accomplish this, but if you're making a game you're going to run in to a couple more instances where a library will make your life easier. In this case... getElementsByClassName is not available in IE, so you'd have to sub in an implementation of it for IE users. This is one trivial example of the headaches involved in writing complex javascript that works in all browsers.

回复收藏 0 原文

~没有更多了~