这是IE错误吗？ `body.foo.bar .container`应用于每个body元素

Question

我有几页和一个样式表。 页面正文分为两类：它们的名称和语言。 例如：

<body class="contact english">

现在，在样式表中，我对“专家”页面的德语版有一条特殊规定：

 body.expertise.deutsch .container
  {
    width: 590px;
  }

在IE 6、7 和8中 ，这种样式不仅会持续应用于

<body class="expertise deutsch">

但是每一页的每一个身体元素 。

当我删除“身体”：

.expertise.deutsch .container
  {
    width: 590px;
  }

它按预期工作，仅适用于“专业知识”。

我傻吗？ 盲？ 俯瞰明显？

这是预期的行为，是已知的错误，还是都不是？

除了IE 8，我什么都找不到，IE应该可以处理多个选择器。

因为已经被误解了，所以“每个主体元素”当然是指在单独页面上都包含相同样式表的单独主体元素。

Answer 1

据我了解，IE6不了解body.expertise.deutsch和body.deutsch之间的区别。 它只会选择链中的最后一个类。 Ryan Brill在这里有更多内容 。

我不确定IE7或8是否修复了它，但是如果这样做，您可能需要处于标准模式才能正常工作（最简单的方法是在文档顶部包含严格的或HTML5文档类型）。

Answer 2

您可能需要将整个样式表和标记发布到某个地方。 我的猜测是，您在其他地方也有一些无效的语句，并且有些语句被怪异地应用了。 您可能还需要验证CSS和标记： http : //jigsaw.w3.org/css-validator/ 。

还要检查此链接。 好像那里有一些IE陷阱： http ：//www.ryanbrill.com/archives/multiple-classes-in-ie/

Answer 3

我在ie7中测试了您的示例，但无法重现您的发现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      .container{
        height: 200px;
        background-color: red;
      }
      body.expertise.deutsch .container {
        background-color: blue;
      }
    </style>
</head>
<body class="expertise english">
<div class="container">
</div>
</body>
</html>

像应显示的那样显示一个红色的div。 当您将第二种身体类别从英语更改为deutsch时，div为蓝色。

唯一应该对此代码有问题的浏览器是ie6，因为它无法理解CSS中的多个类，并且仅应用最后一个（如果仅应用deutsch类，则该页面将变为蓝色）。

不确定…

Answer 4

每页上的每个正文元素。

那么您在页面上有多个body元素吗？ 那不正常。 没有看到HTML很难说，但是要记住的一件事是， body.expertise.deutsch .container不是直接的子选择器。 因此，想象一下这样的HTML（我猜）：

<body class="expertise esperanto">
    <div class="container">I'm 590px wide</div>

    <body>
        <div class="container">I'm also 590px wide</div>
    </body>
</body>

因为容器有一些父级（但是是远程的）和“专家世界语”类，所以它选择了样式。 我的建议是，不要在同一页面中使用多个正文标签。 另外，如果您有两个.container元素，并且只能选择一个样式，则可以给它们提供不同的类。

Answer 5

实际上，body标签在您的代码中应用了两个单独的类，它们不是作为一个类连接在一起，而是位于相同的深度。

body.expertise
body.deutsch

所以你的代码...

body.expertise.deutsch .container
  {
    width: 590px;
  }

仅当该类为：

<body class="expertise.deutsch">

我不确定目前是否能解决您的问题...

您可能要检查它们是否是您可以用来缩小CSS范围的其他唯一类标识符。

最终，它更加令人头疼，那么如果可以避免的话，每个元素都需要使用多个类。 我通常将页面设置为<body><div id="body"> </div></body>因此出于这种原因，我有另一个外部容器可用于CSS。