Question

在我的网站上，我在某个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>

既然#splash div只出现在那个html页面上，我需要影响该页面的css html {}有点不同。下面的符号是否符合我的要求？

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

Answer 1

我认为你正在寻找一个父选择器;可悲的是this doesn't exist in CSS，所以你运气不好。

根据我的理解，这主要是出于性能原因 - Jonathan Snook's article进一步详细说明。

现在要么改变页面生成，要么将类或ID添加到“启动”页面上的html元素，要么使用JavaScript，例如arkanciscan的jQuery cssParentSelector library提到。

Answer 2

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

#splash {
    /* stuff */
}

关于您的问题：

html>body#splash

不行;尝试

html>body #splash

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

（我假设您正在尝试选择#splash;这就是我如何阅读您的问题。如果您想选择body如果#splash存在，那么...... ，你不能。）

Answer 3

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

如果您今天要使用此功能，可以尝试使用此填充https://github.com/Idered/cssParentSelector

Answer 4

儿童选择器由>表示：http://www.w3.org/TR/CSS2/selector.html#child-selectors

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

您的代码需要此空间：

  html>body #splash

其内容如下：“选择ID为splash的元素，该元素是body的后代html。

您的代码是：

 html>body#splash

您当前的代码为：“选择ID为splash且身为html子元素的正文元素。

Answer 5

如前所述，目前的CSS无法做到这一点。

但只是给你一个建议：你可以为有问题的HTML添加一个唯一的ID或类;如果你知道它提前哪一个，只需静态添加;如果没有，你将不得不实际看（使用JS），如果你在身体中描述的div，你不能单独使用CSS。

CSS表示法：“＆gt;”的含义

5 个答案: