0

在我的网站中，我在一些 html 页面上有以下结构：

<html>
     <head><!-- All the usual information here, including the link to the css file --></head>
     <body>
           <div id="splash">
                 <!-- The good stuff -->
           </div><!--End of Splash-->
     </body>
</html>

现在#splashdiv 只出现在那个 html 页面上，我需要影响该页面的 csshtml {}有点不同。下面的符号会做我需要的吗？

html>body#splash {/* CSS that only affects the html that contains div #splash */}
4

5 回答 5

3

我认为您正在寻找父选择器；可悲的是，这在 CSS 中不存在，所以你不走运。

据我了解，这主要是出于性能原因——Jonathan Snook 的文章更详细一些。

现在是时候更改页面生成以便将类或 ID 添加到html“启动”页面上的元素中，或者求助于 JavaScript，例如arkanciscan 提到的 jQuery cssParentSelector 库。

于 2013-08-26T22:23:47.483 回答
2

由于 ID 是唯一的，您可以这样做：

#splash {
    /* stuff */
}

关于你的问题：

html>body#splash

不管用; 尝试

html>body #splash

与>空间基本相同，但只选择直接子级。

（我假设您正在尝试选择#splash；这就是我阅读您的问题的方式。如果您想选择body是否#splash存在，那么...好吧，您不能。）

于 2013-08-26T22:22:23.593 回答
2

就像其他人说的那样，你不能这样做是 CSS ......但是！在下一版本的 CSS 中，您将能够在复合选择器的任何部分添加感叹号，以指示您的规则应应用于选择器的哪个元素。这将被称为“主题”（http://www.w3.org/TR/selectors4/#subject）

如果你今天想使用这个，你可以试试这个 polyfill https://github.com/Idered/cssParentSelector

于 2013-08-26T22:34:51.967 回答
1

子选择器由以下方式指示>：http ://www.w3.org/TR/CSS2/selector.html#child-selectors

这意味着您正在选择一级后代。

您的代码需要这个空间：

  html>body #splash

内容为：“选择 id 为 的元素，该元素是 的子代的splash后代。”bodyhtml

你的代码是这样的：

 html>body#splash

您当前的代码显示：“选择 id 的 body 元素splash是html.

于 2013-08-26T22:22:44.173 回答
1

如前所述，这在当前的 CSS 中是做不到的。

但只是给你一个建议：你可以在有问题的 HTML 中添加一个唯一的 ID 或一个类；如果你提前知道是哪一个，就静态添加；如果没有，您将不得不实际查看（使用 JS）如果div您在正文中描述了类似的内容，那么您不能仅使用 CSS 来做到这一点。

于 2013-08-26T22:38:52.783 回答