Question

我使用以下css：

/* style.css */
#someId {
   background-color: red;
}
#someId.medium {
   width: 300px;
}
#someId.large {
   width: 500px;
}

使用html：

<!-- medium.html -->
<div id="someId" class="medium">hello, world</div>

和

<!-- large.html -->
<div id="someId" class="large">hello, world</div>

我知道上面的内容在FireFox和Opera上运行良好，并且不在IE6上工作（惊喜，惊喜）。

我的问题是：

上面的CSS是否符合CSS规范（我在哪里可以找到这个特定的问题）？

什么浏览器（在什么平台上）做＆amp;不支持这个？

更新
每页的ID是唯一的。我试图通过medium.html和large.html来表达这一点，但显然它不够明显。

更新2：
上面的代码示例只是为了说明我的问题。它不是生产代码的一部分，并不意味着完整。简而言之，它只是用非常具体的解决方案来证明问题的一个例子。

Answer 1

quirksmode有一个表，其中包含浏览器支持的选择器（以及其他内容）。不幸的是，没有测试组合选择器。但由于ie6失败multiple classes，这并不令人感到意外。

w3c css specification解释了css选择器应该如何工作，有一个DIV.warning和E#myid并不完全像你的那样但建议它应该有效（也许它在我没有做过的页面中解释'读完全部;））

Answer 2

如果您不需要“#someId”作为id，则可以将其设置为“.someId”类，然后使用其他两个类来扩展所需的位置...如此class =“someId medium”等。试试这个，看看它是否有用。此外，它是一个更好的解决方案，因为你不能在一个页面上有两个同名的ID。

.someId {
   background-color: red;
}
.medium {
   width: 300px;
}
.large {
   width: 500px;
}

然后..

<div class="someId medium">hello, world</div>

或

<div class="someId large">hello, world</div>

Answer 3

应该工作！那很奇怪。尝试翻转它们，如.large#someId。

Answer 4

Crikey。我以前从未见过这个，但你完全正确。您的代码应该按照您的期望工作。

我很确定只有IE 6会出现问题。

Answer 5

你可以尝试的一件事是比你想要的更冗长。像这样添加类名：

<div id="someId" class="someId-medium">hello, world</div>

或

<div id="someId" class="someId-large">hello, world</div>

然后将CSS更改为：

#someId {
    background-color: red;
}
.someId-medium {
    width: 300px;
}
.someId-large {
    width: 500px;
}

Answer 6

与上面提到的一样，ID是唯一标识符，因此应该只在页面中使用一次。通常情况下，ID将用于标记中的主要部分，如＃header，＃content #footer等...其余部分，只需使用类。

至于您的文本，将#someId更改为.someId然后您可以使用.large或.medium，因为您可以将多个类应用于元素。

<div class="someId large">hello, world</div>

你的CSS将是

.someId { background-color: #ccc; }
.large { font-size: 50px; }
.medium { font-size: 25px; }

另外......如果文本“Hello，World”是标题，我强烈建议你使用正确的元素（h1，h2等等）并调整它们的样式而不是创建新的样式。

希望这有帮助！

编辑：对于下面的评论，这里有一些HTML代码，我刚刚在IE6中测试并且有效。它也适用于FF和Opera，因此我认为它也适用于Safari和Chrome。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>An XHTML 1.0 Strict standard template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
    .something { background-color: #ccc; }
    .else { color: #090; }
    </style>
</head>

<body>

    <div class="something">This is just something</div>
    <div class="else">This is just else</div>
    <div class="something else">This is something else</div>

</body>
</html>

Answer 7

不确定是否可以在您的应用程序中将Javascript库拖入混合中，但是在使用jQuery时，很多CSS在IE6中都无法正常工作。

但是，如果您没有其他用于24kb jQuery库的东西，那么对于单个CSS属性来说，它似乎是一个沉重的插件。也许你可以优雅地退化？

将类选择器与ID组合在一起

7 个答案: